[转](1条消息) element-ui table组件编辑后数据更新视图不更新(转载请删除括号里的内容)

 

记录今天遇到的一个小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(','))

---------------------
作者：小白酱的头号黑粉
来源：CSDN
原文：https://blog.csdn.net/weixin_44198018/article/details/106481120
版权声明：本文为小白酱的头号黑粉原创文章，转载请附上博文链接！