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>
相关推荐
gnip7 分钟前
总结一期正则表达式
javascript·正则表达式
军训猫猫头19 分钟前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员24 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘29 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出31 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的31 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊33 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
Java水解34 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵37 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im38 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript