el-table实现表头列宽自适应（即表头文本不换行）_el-table fit属性

前情提要

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
        />
1
2
3
4
5
6
7
8

• 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);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

结论

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

修改前：

修改后：

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