element-ui table组件编辑后数据更新视图不更新

最新推荐文章于 2023-09-24 22:54:17 发布

小白酱的头号黑粉

最新推荐文章于 2023-09-24 22:54:17 发布

阅读量7.7k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端成长

本文链接：https://blog.csdn.net/weixin_44198018/article/details/106481120

前端成长专栏收录该内容

16 篇文章

订阅专栏

本文记录了在使用el-table组件时遇到的数据更新后视图未刷新的bug及解决过程。问题在于直接修改数组元素导致视图无法感知变化，通过使用splice方法强制更新数组，从而解决了视图不刷新的问题。

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

记录今天遇到的一个小bug

使用el-table实现表格的增删改
信息未编辑之前
在这里我的表格数据源绑定的是rolesList，选中的当前行是role；我们将所需的信息打印出来
在这里插入图片描述

信息编辑后
可以看出我当前的数据已经更改，但我的视图信息并没有更改，查找解决方案后尝试了给表头增加一个row-key=“id”，确保每一行的id是唯一的，仍然不行。(这个建议大家先进行尝试)

最终解决方案：发现是由于我的数据结构的问题，我是用的是数组，我通过this.role改变的只是数组指向的那个数据，但数组指向的地址并没有发生更改，也就是说数组本身并不知道自己发生了改变。
最后加了一句这个解决。因为splice方法处理后的数组会将数组处理结果返回给原数组。所以相当于显示的提醒数组进行了更新。

this.rolesList.splice(1,0);

tips：数组变为逗号相隔的字符串并且去掉末尾的逗号

	  let str = ''
      this.checkData.forEach(item => {
        str += item + ', '
      })
      this.editForm.role = str.substring(0, str.lastIndexOf(','))