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>
相关推荐
midsummer_woo4 分钟前
基于springboot的在线教育系统(源码+论文)
vue.js·spring boot·mysql
香菜狗4 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录4 小时前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
顽疲4 小时前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero5 小时前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
YGY Webgis糕手之路5 小时前
OpenLayers 快速入门(六)Interaction 对象
前端·vue.js·经验分享·笔记·web
前端开发爱好者6 小时前
尤雨溪力荐 Vue-Plugins-Collection!Vue 生态 最强插件 导航!
前端·javascript·vue.js
_未完待续6 小时前
框架实战指南-透明元素
前端·vue.js
he___H7 小时前
VUE的学习
前端·vue.js·学习
速易达网络7 小时前
PHP 与 Vue.js 结合的前后端分离架构
vue.js·php