星星之火-解决ElementUI在修改表单数据时,表格数据也在随之改变问题

本文最后更新于:February 12, 2022 am

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里,不积小流无以成江海。齐骥一跃,不能十步,驽马十驾,功不在舍。面对悬崖峭壁,一百年也看不出一条裂缝来,但用斧凿,能进一寸进一寸,能进一尺进一尺,不断积累,飞跃必来,突破随之。

目录

今天在用elementUI的表单修改数据时,遇到表格的数据也跟着一起修改的问题,并且不管是不是按确定或取消按钮,表格的数据还是被修改了。错误处理代码:

1
2
3
4
5
handleClick(row) { //编辑信息
console.log(row);
this.form = row
this.dialogFormVisible = true
},

后面网上搜了之后发现,是因为深浅拷贝的问题。问题代码:

1
this.form = row

row是Object对象类型,如果直接赋值的话,就变成了浅拷贝,复制的是地址,导致在表单中改变值的时候table中的数据也跟着改变,所以要进行深拷贝。解决办法:

1
2
3
4
5
handleClick(row) { //编辑信息
console.log(row);
this.form = JSON.parse(JSON.stringify(row))
this.dialogFormVisible = true
},