el-table表头自适应

最新推荐文章于 2024-05-31 19:18:24 发布

问题记录中心✘

最新推荐文章于 2024-05-31 19:18:24 发布

阅读量373

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_40394560/article/details/132259146

版权

labelHead(h, {column}) {
            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()
     // 必须是div 否则有操作按钮会乱
     return h('div', {class: "table-head", style: {width: "100%"}}, column.label);
 },

 <el-table-column label="" :render-header="labelHead" prop=""/>