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

在使用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>
相关推荐
Jammingpro11 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
闲蛋小超人笑嘻嘻19 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
焚 城19 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶20 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中20 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略20 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86821 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
LuckySusu1 天前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu1 天前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu1 天前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js