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>
相关推荐
YL有搞头1 天前
VUE的模版渲染过程
前端·javascript·vue.js·面试·模版渲染
某公司摸鱼前端1 天前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
给月亮点灯|1 天前
Vue基础知识-重要的内置关系:vc实例.__proto__.__proto__ === Vue.prototype
前端·vue.js·原型模式
正义的大古1 天前
OpenLayers 入门篇教程 -- 章节三 :掌控地图的视野和交互
开发语言·vue.js
定栓1 天前
vue3入门- script setup详解下
前端·vue.js·typescript
定栓1 天前
vue3入门- script setup详解上
前端·javascript·vue.js
jason_yang1 天前
vue3中定义组件的4种姿势
前端·vue.js
王六岁1 天前
Vue 3 表单验证组合式 API,提供类似 Ant Design Vue Form 的强大表单验证功能
前端·vue.js
fury_1231 天前
vue3:el-date-picker三十天改成第二十九天的23:59:59
前端·javascript·vue.js
anyup1 天前
uni-app 项目创建方式有哪些,看这一篇就够了!
前端·vue.js·uni-app