elementui表格宽度适应内容_Element UI实现表格列宽随内容自适应

前言

对于动态获取数据的表格，如果期望单元格内容不折行，就要设定足够的宽度，同时又希望表格内容尽量紧凑，但是，由于数据不确定，所以无法预设宽度，怎么办呢？有这样一种办法：

方案

先让表格渲染

引入CSS class来让单元格内容单行显示

遍历表头的.cell和表体的.cell，算出每个元素的scrollWidth，汇总到二维数组里

考察二维数组的每个一级元素的每个单元格的宽度，找出最大值

设置的width都等于这个最大值即可

这个方案按理说，会发生表格闪烁，因为先渲染，又调整列宽的缘故。为了解决这个问题，我想到了visibility: hidden;，当hidden时，表格依然会渲染，只不过不显示，此时就可以计算各种宽度，等计算好，赋值好，再visible即可。

恰好可以借用loading变量实现切换。

template

给表格组件加上这个：

ref="listTable" class="columns-fit" :class="loading ? null : 'visible'"

我假设你采用了loading变量来让表格显示加载动画。

给每个加上width，如下：

...

...

你可以给有些列不设width，或者设置固定数值，此时其他列的下标无需调整，因为下标表示第几个列。

style</