原代码
methods: {
// 编辑事件
modification(row) {
this.dialogVisible = true;//弹框显示
this.gather = row;//赋值操作
},
},
出现这种情况,一旦表单的数据被改变,表格中相对应的数据也会直接跟着改变,且无论是点击确定还是点击取消按钮,表格的数据依旧会被修改。这是为什么呢?
错误写法
this.gather = row;//赋值操作
因为 row
是 Object
对象类型,如果直接赋值的话,就变成了浅拷贝,复制的是地址,导致在表单中改变值的时候表格中的数据也跟着改变,所以要进行深拷贝,将赋值操作改成以下形式:
正确写法
this.gather = JSON.parse(JSON.stringify(row));//赋值操作
JSON.parse(JSON.stringify(obj))
这行代码的意思就是利用 JSON.stringify
将 js
对象序列化(JSON字符串),再使用 JSON.parse
来反序列化(还原) js
对象。序列化的作用是存储和传输。
注意:
这种方法只适用于一般数据的拷贝(对象、数组)。