解决数据改变视图不更新的问题

情况描述

值（List）修改后，打印值改变了，但页面数据没刷新

原因

解构赋值
如果所解构的原对象是一维数组或对象，其本质就是对基本数据类型进行等号赋值，那它就是深拷贝；
如果是多维数组或对象，其本质就是对引用类型数据进项等号赋值，那它就是浅拷贝；
最终的结论就是：解构赋值是浅拷贝（因为它确实不能对多维数组或对象达到深拷贝的作用）；

解决方案

  Object.keys(result).forEach(item => {this.tableData[index][item] = result[item];})
 

  Object.keys(result).forEach(item => {this.$set(this.tableData[index], item, result[item])})
 

 this.tableData[index] = { ...this.tableData[index], ...result };this.tableData = JSON.parse(JSON.stringify(this.tableData))
 

 this.$nextTick(()=>{this.isTable = true;})
 

当表格数据改变，表格没刷新时，并且使用了render

例如：如下是增加了表格可展开行，但是展开行在重新赋值时并没有更新页面

 columns: [{type: "expand",width: 30,align: "center",render: (h, params) => {return h("div",{style: {padding: "5px 0 5px 30px",backgroundColor: "#fff",},},[h("Table", {props: {border: true,columns: this.columns1,data: this.data[params.index].children || [],tablekey: this.tablekey,},}),]);},}
 ]
 

解决方案

this.data.forEach((item) => {if (item.id === id) {let result = res.result || [];item.children = result;this.submitBindData.ids = result.map((o) => o.id).join(",");}});++this.tablekey;