Vue+element组合el-table-column表头宽度自定义

[本文出自天外归云的博客园]

需求

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 = 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'
        },
      }
    }
  }
})