el-table表头宽度自定义
场景:
1. 某列表头文字内容过长,要对每列表头自定义宽度
2. 表格row的每一column文字不换行,超过列宽则省略,mouseover有提示
3. 对于label做滤值处理
<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 = 0 for (const char of str) { if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) { // 如果是英文字符,为字符分配8个单位宽度 flexWidth += 8 } else if (char >= '\u4e00' && char <= '\u9fa5') { // 如果是中文字符,为字符分配20个单位宽度 flexWidth += 20 } else { // 其他种类字符,为字符分配5个单位宽度 flexWidth += 5 } } if (flexWidth < 50) { // 设置最小宽度 flexWidth = 200 } if (flexWidth > 250) { // 设置最大宽度 flexWidth = 250 } return flexWidth + 'px' }, } } } })