使用element-ui在移动端进行数据展示时,表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多,不希望每个表格的高度不一致,所以有了希望根据表格数据最长的长度来设置表头宽度的需求。
这里是利用了一个插件ExTableColumn,具体操作方法:
通过继承实现el-table-column列宽根据内容自适应
大神写的插件,用npm下载到项目中,根据里边的步骤配置,是可用的。 但使用的时候遇到了一些问题,记录一下。
1.表格没有任何变化,但是表格里面的数据内容超出了边框
可能原因:表格数据如果是从接口获取的,获取接口需要时间,一定要有值再显示表格。
解决办法:先将tableData
值置为空,然后再用v-if
来控制,当tableData
的值不为空时显示表格,如果改变了tableData
的值,也记得先将tableData
置为空就好了。
<el-table
v-if="dataList.length > 0"
class="list-table"
:data="dataList"
:height="tableHeight"
ref=