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>
相关推荐
paopaokaka_luck15 分钟前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
雲墨款哥1 小时前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌1 小时前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js
光影少年1 小时前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
江城开朗的豌豆2 小时前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02112 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
清幽竹客9 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua9 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8889 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui