转载 https://www.itdaan.com/blog/2018/09/20/a493acbd5abe749ed3cd1c54dfabf9ae.html
需求
1. 某列表头文字内容过长，要对每列表头自定义宽度
2. 表格row的每一column文字不换行，超过列宽则省略，mouseover有提示
3. 对于label做滤值处理
实现
Vue文件主要代码如下：
<template><el-row><el-col :span="24"><template><el-table :data="tableData"><!--设置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内容过滤器 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) {
// 设置最小宽度 flexWidth =200 }
if (flexWidth >250) {
// 设置最大宽度 flexWidth =250 }
return flexWidth +'px' },
}
}
}
})
