ElementUI中实现el-table表格列宽自适应,列根据内容自动撑满,内容不换行

一、概述

在表格宽度固定时，实现内容不换行，表格自动显示滚动条

当前显示效果：

 期望实现效果：

 二、实现思路

遍历表格数组，每次都构建一个隐藏的span元素，获取该元素的宽度，对比保存最大值

代码如下：

 

```typescript /*** 表格列宽自适应* @param prop 属性* @param records 数据* @param minWidth 最小宽度*/ const getColumnWidth = (prop: string, records: any, minWidth = 80) => {const padding = 12; // 列内边距

const contentWidths = records.map((item: any) => {const value = item[prop] ? String(item[prop]) : "";const textWidth = getTextWidth(value);return textWidth + padding;
});const maxWidth = Math.max(...contentWidths);
return Math.max(minWidth, maxWidth);

}
/**

• el-table扩展工具 -- 列宽度自适应 - 获取列宽内文本宽度
• @param {*} text 文本内容
• @returns 文本宽度(int)
  */
  const getTextWidth = (text: any) => {
  const span = document.createElement("span");
  span.style.visibility = "hidden";
  span.style.position = "absolute";
  span.style.top = "-9999px";
  span.style.whiteSpace = "nowrap";
  span.style.fontSize = "16px";
  span.innerText = text;
  document.body.appendChild(span);
  const width = span.offsetWidth + 16;
  document.body.removeChild(span);
  return width;
  }

<h1>三、总结</h1>
<p>其实是比较dirty的实现方式，性能不算很好，但胜在简单好用。另外还可以全局注入该方法。</p>
<p>网上也有比较专业的组件库解决这一问题：</p>
<code>af-table-column:</code>
<p class="notranslate"><code></code>https://github.com/legendJaden/AFTableColumn</p>
<p>基于&nbsp;<code>element-ui</code>&nbsp;组件库的&nbsp;<code>el-table-column</code>&nbsp;组件, 支持自适应列宽功能</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>