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

情况描述原因解决方案当表格数据改变，表格没刷新时，并且使用了render解决方案

情况描述

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

如何赋值：this.tableData[index] = { ...this.tableData[index], ...result }想法：利用解构赋值，修改对应key的value值例：this.tableData[index] = {id:1,name:jarry} result={id:2}

原因

解构赋值

如果所解构的原对象是一维数组或对象，其本质就是对基本数据类型进行等号赋值，那它就是深拷贝；

如果是多维数组或对象，其本质就是对引用类型数据进项等号赋值，那它就是浅拷贝；

最终的结论就是：解构赋值是浅拷贝（因为它确实不能对多维数组或对象达到深拷贝的作用）；

解决方案

1.直接赋值

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

2.$set

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

3.重新赋值JSON.parse(JSON.stringify(this.tableData))

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

4.v-if&&this.$nextTick 重新渲染页面

<Table :columns="columns" :data="tableData" v-if="isTable"></Table>

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,},}),]);},}]

解决方案

添加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;