element-table出现错位解决方法

先看示例图,这个在开发中还是很常遇到的,在table切换不同数据时或者切换页面时,容易出现:

解决方法很简单,官方有提供方法:

我们可以在重新渲染数据后:

复制代码
this.$nextTick(() => {
   this.$refs.tableRef.doLayout()
});

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

复制代码
updated() {
    // myTable是表格的ref属性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
}

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

复制代码
<el-table :data="tableData" border>
    <el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发2 小时前
HTML DOM 访问
开发语言
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person4 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6664 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
码农不惑5 小时前
2025.06.27-14.44 C语言开发:Onvif(二)
c语言·开发语言