前情提要

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的实现
  1. 创建一个span元素
  2. 设置span元素的innerText为表头文本,并将span插入document
  3. 获取span的宽度,并设置列的最小宽度。
  4. 移除第二步插入的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);
 }

结论

如此一来,列宽适应表头宽度的需求便实现了。

修改前:
在这里插入图片描述
修改后:
在这里插入图片描述

本文到这里就结束啦,如果有其他更好的实现或者本文的实现存在什么问题的话,希望不吝赐教~!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐