el-table表格数据变化，页面不更新问题

最新推荐文章于 2025-03-27 10:23:35 发布

sven_chen93

最新推荐文章于 2025-03-27 10:23:35 发布

阅读量3.4w

点赞数 47

分类专栏： vue el-table

本文链接：https://blog.csdn.net/sven_chen93/article/details/110880675

版权

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

el-table

3 篇文章

订阅专栏

本文记录了一位开发者在Vue.js应用中遇到的列表页面数据更新后无法自动刷新的问题。尝试了多种方法如nextTick、清空tableData和强制刷新$forceUpdate无效。最终通过给表格组件添加key属性并动态设置，实现了页面的重新渲染。这个解决方案类似于在router-view上加key来强制刷新组件，对于类似组件不更新的问题，添加key是一种有效策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做列表首页时，根据条件切换当前table，但是数据更新后，页面不刷新问题
尝试了几种方法，还是没效果

 1. 在nextTick中使用this.$refs.table.doLayout()
 2. 在data赋值前清空tableData
 3. 强制刷新：this.$forceUpdate()

后面在blog中看到某位大佬的方法，给table加个key，页面就能更新了，所以Mark下

<el-table
    ref="table"
    :data="tableData"
    :key="itemKey"
></el-table>


// 在tableData赋值的地方，顺便随机设置下key，页面就会刷新了
this.itemKey = Math.random()

总结：设置key这种，就像路由不重新加载的解决方法一样，也是在router-view上加key来强制刷新，所以类似很多组件不刷新的问题，加个key应该都能重新渲染试图