element el-table（:render-header）实现动态表头的自适应

2023.2.10今天我学习了如何实现自定义表头的宽度自适应。

在使用el-table的时候我们使用动态的表头会发现出现宽度不够挤压的情况，如：

这会让整个页面的布局不美观，于是我找到了：render-header计算一个表头的字节长度，进行计算拿到自定义的宽度。

效果如：

 我们可以进行在main.js中引入一个全局组件的封装。

新文件.js:

// 实现全局表头自适应的方法
// 在el-table-column中使用:render-header="tableHeaders.renderHeader"
//renderHeader自定义的变量名
const commonJS = {
  renderHeader(h, { column, $index }) {
    let width = 0
    // 新建一个 span
    let span = document.createElement('span');
    // 设置表头名称
    span.innerText = column.label;
    // 设置表头class
    span.className = 'getTextWidth'
    // 临时插入 document
    document.querySelector('body').appendChild(span)
    // 获取span标签的宽度
    width = document.querySelector('.getTextWidth').offsetWidth
    // 重点：获取span最小宽度,设置当前列,注意这里加了20,字段较多时还是有挤压,且渲染后的div内左右padding都是10,所以+20.如果有排序按钮要记得再加上24,排序按钮的宽度是24(可能还有边距/边框等值，需要根据实际情况加上)
    column.minWidth = width + 50;
    // 移除 document 中临时的 span
    document.querySelector('.getTextWidth').remove()
    return h('span', column.label);
  },
}
export default commonJS;

main.js引入：

// 全局实现表头自定义宽度的方法(方法名可以自定义)
import tableHeaders from '@/customTableHeaders'

// 全局实现表头自定义宽度的方法
Vue.prototype.tableHeaders = tableHeaders

相应的table中：

<el-table>
//tableHeaders自定义的方法名，renderHeader自定义的变量名
  <el-table-column   :render-header="tableHeaders.renderHeader"></el-table-column>
</el-table>