Element技能点--el-table行列错位对不齐问题

点此查看全部文字教程、视频教程、源代码

1. 问题表现

使用ElementUI的el-table后，偶然发现出现行列错位、对不齐问题。

还有一种列对不齐的，没找到截图，反正就是表格错乱。

2. 问题发现

实际上为了让表格可以垂直滚动造成的，添加了如下代码，对原生样式造成了影响。

.el-table {
  overflow-y: auto !important;
}

3. 问题处理

直接在el-table外围添加一个div，然后固定div的高度让其垂直滚动即可。

当然如果还需要固定表头，可以参考：ElementUI表格el-table固定表头且高度占满

4. 另一种处理方案

有时候切换表格v-if显示时，也会导致行列错位，此时可以尝试将v-if换为v-show

5. 终极方案

在后面的测试中，发现可以重新排列，在数据加载完成后运行如下代码即可：

 <el-table ref="mainTable" :data="list">
 </el-table>

	this.$nextTick(() => {
      this.$refs.mainTable.doLayout()
   	});