【无标题】:render-header=“renderHeader“ 设置表头不换行

最新推荐文章于 2024-01-17 10:27:58 发布

做外包的那些年

最新推荐文章于 2024-01-17 10:27:58 发布

阅读量844

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Fs670267542/article/details/128000839

版权

vue中使用element-UI,table组件设置表头不换行

  //表格头部不允许换行
        renderHeader(h, { column, $index }) {
            // 新建一个 span
            let span = document.createElement('span');
            // 设置表头名称
            span.innerText = column.label;
            // 临时插入 document
            document.body.appendChild(span);
            // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
            column.minWidth = span.getBoundingClientRect().width + 20;
            // 移除 document 中临时的 span
            document.body.removeChild(span);
            return h('span', column.label);
        },