vue 改变table某一行的值_vue中新增表格行和列设置对应值的时候不触发Dom更新的问题...

最近项目中出现了一个需求就是在现有的表格基础上添加新的行和列，本以为是一件很简单的事情，直到我在设置新增的对应值的时候发现了他不能触发Dom视图更新，不知该如何下手，我打印了表格数据发现了问题所在如下

行

image.png

新增的行数据里面没有set get也就触发不了视图更新， 如何解决这个问题呢？ 我就想既然原来的数据 中有set 和 get我为啥不复制一个来作为最新的数据，但是随之而来的又有新的问题就是这里的set 和 get绑定的是原先的被复制的那一行数据这里新的行数据改变的时候也会影响到原来那一行数据于是我就想这里需要做一个深拷贝应该能解决问题， 这里就使用了JSON.parse(JSON.stringify(val))做了深拷贝，复制成功了， 也能独立触发set和get完美！！！ 代码如下：

@click='addObj.Table_data.push(clearObj($copy(addObj.Table_data[0])))'

let clearObj = obj => { // 遍历对象并且清空数据

Object.keys(obj).map(v => {

obj[v] = ''

})

return obj

}

let $copy = (val) => { // JSON形式的深拷贝

return JSON.parse(JSON.stringify(val))

};

列

接下来就是新增列数据，同样的由于是新增的表头数据，对应每个行数据里没有这个表头的set和get 那我们就分别给他们设置set和get就可，遍历每一行数据给他们添加这个新增表头对应键的set代码如下：

this.addObj.Table_data.map(v => {

this.$set(v, this.addTableAddHeader, '')

})

this.headers.push(this.addTableAddHeader)

同样能解决视图不更新的问题，这个方法也可以用在行新增中，这里是分别列了两种方法而已。