【热】如何实现el-table列宽随内容长度自适应最小宽度

非常火急火燎的来写这篇博客！！因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法，要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了！

应用场景

很多时候，在做表格时，我们希望列项的宽度随着内容宽度自适应调整，而不希望换行。

但在数据导入前，我们不知道内容宽度是多少，所以没办法直接设置确定的min-width去保证内容不换行。比如这样（这只是个我随便写的表格例子，不用太纠结于数据）：

?我需要达到的效果是，列宽根据我内容项里最长的一项调整长度实现下面这样子的效果：

我们的思路是

• 动态计算每列的宽度：遍历数据数组，获取每单元格内容的宽度，并加上列内边距，然后取最大宽度作为列宽。
• 动态创建一个<span>标签，将其设置为不可见、绝对定位并放置在屏幕外，以便获取文本的实际宽度。然后将文本内容赋值给<span>，将其添加到页面上，获取其宽度后再移除。

通过以上方法，就可以实现 el-table 列宽随内容长度自适应最小宽度的效果。

根据这个思路，实现一个方法getColunmnWidth供表格列项使用。

  function getColumnWidth(prop) {
    const minWidth = 80; // 最小宽度
    const padding = 16; // 列内边距

    const contentWidths = assessments.map((item) => {
      const value = item[prop] ? String(item[prop]) : "";
      const textWidth = getTextWidth(value);
      return textWidth + padding;
    });

    const maxWidth = Math.max(...contentWidths);

    return Math.max(minWidth, maxWidth);
  }
  function getTextWidth(text) {
    const span = document.createElement("span");
    span.style.visibility = "hidden";
    span.style.position = "absolute";
    span.style.top = "-9999px";
    span.style.whiteSpace = "nowrap";
    span.innerText = text;
    document.body.appendChild(span);
    const width = span.offsetWidth + 5;
    document.body.removeChild(span);
    return width;
  }

?在列表代码中，直接传入参数名称，调用方法即可

<el-table-column
    prop="name"
    label="姓名"
    :min-width="getColumnWidth('name')"
/>

亲测有效！！！

然后呢，大家可以像我一样把这个方法进行封装供多个项目/多个页面的表格使用。

完整代码和封装代码我就不发出来了，希望大家可以看懂了之后自己实现出来，拒绝直接复制粘贴！