el-table实现表头列宽自适应(即表头文本不换行)
前情提要leader提出,希望表头文本能够将列宽适应内容宽度变长,而非换行显示。接收到需求,首先去element官网查看文档看有没有相关属性可以设置。经查验,fit属性的说明是“列的宽度是否自撑开”,我一想,这个描述跟我的需求挺像的呀,但仔细一看,这个属性默认就是true,也就是说这个属性本就打开了,但表现出来的效果和我们想要的不一样。这个属性应该是指,在所有列宽加起来<表格宽度时,列宽是否
前情提要
leader提出,希望表头文本能够将列宽适应内容宽度变长,而非换行显示。接收到需求,首先去element官网查看文档看有没有相关属性可以设置。经查验,fit属性的说明是“列的宽度是否自撑开”,我一想,这个描述跟我的需求挺像的呀,但仔细一看,这个属性默认就是true,也就是说这个属性本就打开了,但表现出来的效果和我们想要的不一样。这个属性应该是指,在所有列宽加起来<表格宽度时,列宽是否撑开以填满表格宽度。效果如下图:
fit=“true”
fit=“false”
没有发现element有提供相关方法来实现我们的需求,从这个issue中也可以看出来。所以只好另辟蹊径来实现这个需求。
实现方案
尝试了多种方案,包括修改css的方式、渲染后计算字符串的宽度再更新列宽等,然后我就看到了这篇文章,从中得到了启发:使用render-header来渲染表头,生成一个dom元素并设置innerText为表头文本,计算元素的实际宽度,再将宽度赋予column的minWidth。
接下来就讲讲具体的实现方法。
el-table-column
的设置
<el-table-column
v-for="(i, $index) in data"
:key="$index"
:label="i"
:render-header="renderHeader"
:prop="(i + `_${$index}`).replace('.', 'T')"
show-overflow-tooltip
/>
renderHeader
的实现
- 创建一个
span
元素 - 设置
span
元素的innerText
为表头文本,并将span
插入document
- 获取
span
的宽度,并设置列的最小宽度。 - 移除第二步插入的
span
元素
renderHeader(h, { column, $index }) {
let realWidth = 0;
let span = document.createElement('span');
span.innerText = column.label;
document.body.appendChild(span);
realWidth = span.getBoundingClientRect().width;
column.minWidth = realWidth; // 可能还有边距/边框等值,需要根据实际情况加上
document.body.removeChild(span);
return h('span', column.label);
}
结论
如此一来,列宽适应表头宽度的需求便实现了。
修改前:
修改后:
本文到这里就结束啦,如果有其他更好的实现或者本文的实现存在什么问题的话,希望不吝赐教~!
更多推荐
所有评论(0)