eltable 列头不换行内容自适应

最新推荐文章于 2024-12-05 11:45:35 发布

wangmingyin

最新推荐文章于 2024-12-05 11:45:35 发布

阅读量1.3k

点赞数 3

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/wangmingyin/article/details/131017147

版权

这段代码展示了如何动态计算ElementUI的el-table-column的最小宽度，以避免内容挤压。通过创建临时span元素，获取文本的最小宽度并添加适当的padding，然后设置column.minWidth以确保列宽足够显示内容。这种方法在处理动态数据和自定义表头时尤其有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是两段关键性代码段：

<el-table-column prop="ZJXZ" label="资金性质" sortable show-overflow-tooltip :render-header="renderHeader"> </el-table-column>

   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 + 50;
                    // 移除 document 中临时的 span
                    document.body.removeChild(span);
                    return h('span', column.label);
                },

内容来源于网络，记录在这里是，方便日后查看