el-table出现表格border错位的解决方法

干了这碗小米汤儿2023-12-22 19:47

在使用el-table组件时，经常遇见页面效果错乱的情况，如下图。

该问题情况是在table切换不同数据时或者切换页面时，容易出现：

那么解决办法是啥呢

先看官方有提供方法：

那么我们可以在需要重新渲染数据时执行：

cpp 复制代码

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

或者在生命周期updated里执行doLayout方法：

（该方法类似于监听table数据的变化，只要数据发生变化就会执行）

cpp 复制代码

updated() {
    // table是表格的ref属性值
    if (this.$refs.table && this.$refs.table.doLayout) {
      this.$refs.table.doLayout();
    }
}

我看网上有提供另一个方法，在第一个el-table-column中加上:key="Math.random()"，大家也可以试下：

cpp 复制代码

<el-table :data="tableData" border>
    <el-table-column :key="Math.random()" prop="id" label="id"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>