.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// 新建一个 spanlet span = document.createElement('span');// 设置表头名称span.innerText = column.label;// 设置表头classspan.className = 'getTextWidth'// 临时插入 documentdocument.querySelector('body').appendChild(span)// 获取span标签的宽度width = document.querySelector('.getTextWidth').offsetWidth// 重点：获取span最小宽度,设置当前列,注意这里加了20,字段较多时还是有挤压,且渲染后的div内左右padding都是10,所以+20.如果有排序按钮要记得再加上24,排序按钮的宽度是24(可能还有边距/边框等值，需要根据实际情况加上)column.minWidth = width + 50;// 移除 document 中临时的 spandocument.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>
