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)

同样能处理视图不升级的问题，这个方法也可以用在行新添加中，这里是分别列了两种方法而已。