Vue + ElementUI el-table动态生成表格，表头宽度自适应实现

Vue + ElementUI el-table动态生成表格，表头宽度自适应实现

需求

最近手头上有个项目，其中一个页面的表格，需要根据不同数据库表动态生成table，并且表头长度非固定，因而需要根据表头内容自适应该列表头的宽度。

方法

ElementUI针对表格，开放了一个自定义render方法，我们直接使用这个自定义方法对每个表头按lable长度设置宽度

代码实现

在表格中直接使用render-header方法:

<el-table size="small" tooltip-effect="light" fit :header-cell-style="{ background: '#F6F8FB' }" :data="tableData" stripe :max-height="tableHeight" style="width: 100%">
   <el-table-column :render-header="headSpanFit" show-overflow-tooltip v-for="(item,index) in tableHeader" :key="index" :prop="item.prop" header-align="center" align="center" :label="item.label" min-width="80"></el-table-column>
</el-table>

在methods中定义headSpanFit方法

headSpanFit (h, { column, index }) {
      let labelLong = column.label.length // 表头label长度
      let size = 14 // 根据需要定义标尺，直接使用字体大小确定就行，也可以根据需要定义
      column.minWidth = labelLong * size // 根据label长度计算该表头最终宽度
      return h('span', { class: 'cell-content', style: { width: '100%' } }, [column.label])
    },

效果如下

仅供参考，有问题欢迎提出