轉(zhuǎn)載?https://www.itdaan.com/blog/2018/09/20/a493acbd5abe749ed3cd1c54dfabf9ae.html
需求
1. 某列表頭文字內(nèi)容過長榄审，要對每列表頭自定義寬度
2.?表格row的每一column文字不換行测蘑，超過列寬則省略牵囤，mouseover有提示
3. 對于label做濾值處理
實(shí)現(xiàn)
Vue文件主要代碼如下：
<template><el-row><el-col :span="24"><template><el-table :data="tableData"><!--設(shè)置show-overflow-tooltip為true使row中的文字有省略提示--><el-table-column :width="flexColumnWidth(column)" :show-overflow-tooltip="true" v-for="column in tableData.columns" :key="column" :label="customLabel(column)" :prop="column"></el-table-column></el-table></template></el-col></el-row></template><script>export default{
? data() {
? ? return {
? ? ? tableData : {
? ? ? ? 'columns': ['測試列頭含有中文且長度過長的情況','test the column th is so long in English','c3'],
? ? ? ? 'rows': [
? ? ? ? ? {
? ? ? ? ? ? '測試列頭含有中文且長度過長的情況': 'v1',
? ? ? ? ? ? 'test the column th is so long in English': 'v2',
? ? ? ? ? ? 'c3': 'v3'? ? ? ? ? },
? ? ? ? ]
? ? ? },
? ? ? methods: {
? ? ? ? // 自定義label內(nèi)容過濾器? ? ? ? customLabel(str) {
? ? ? ? ? let ret =''for (const char of str) {
? ? ? ? ? ? // 例：濾掉空格if (char!==''){
? ? ? ? ? ? ? ret +=char? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? return ret
? ? ? ? },
? ? ? ? // 自定義表頭列寬? ? ? ? flexColumnWidth(str) {
? ? ? ? ? let flexWidth =0for (const char of str) {
? ? ? ? ? ? if ((char>='A'&&char<='Z') || (char>='a'&&char<='z')) {
? ? ? ? ? ? ? // 如果是英文字符曲楚，為字符分配8個單位寬度? ? ? ? ? ? ? flexWidth +=8? ? ? ? ? ? } elseif (char>='\u4e00'&&char<='\u9fa5') {
? ? ? ? ? ? ? // 如果是中文字符欣簇，為字符分配20個單位寬度? ? ? ? ? ? ? flexWidth +=20? ? ? ? ? ? } else {
? ? ? ? ? ? ? // 其他種類字符宣赔，為字符分配5個單位寬度? ? ? ? ? ? ? flexWidth +=5? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? if (flexWidth <50) {
? ? ? ? ? ? // 設(shè)置最小寬度? ? ? ? ? ? flexWidth =200? ? ? ? ? }
? ? ? ? ? if (flexWidth >250) {
? ? ? ? ? ? // 設(shè)置最大寬度? ? ? ? ? ? flexWidth =250? ? ? ? ? }
? ? ? ? ? return flexWidth +'px'? ? ? ? },
? ? ? }
? ? }
? }
})
