解决element-ui中，在表单中修改数据，表格的数据也跟着修改的问题

最新推荐文章于 2024-06-10 20:22:14 发布

yb305小白

最新推荐文章于 2024-06-10 20:22:14 发布

阅读量1.6k

点赞数 9

分类专栏： Element-UI 文章标签： elementui 前端

原文链接：https://blog.csdn.net/SmallTeddy/article/details/106542890

版权

8 篇文章 1 订阅

订阅专栏

问题：在表单中修改数据，经常遇到表格的数据也跟着修改的问题，并且不管是不是按确定或取消按钮，表格的数据还是被修改了。
部分代码如下：

editRow(row: any): void {
    this.currentInfo = row;
    this.dialogVisible = true;
    this.title = '更新信息';
  }

问题原因：

this.currentInfo = row;

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

解决方案：利用JSON进行深拷贝

editRow(row: any): void {
    this.currentInfo = JSON.parse(JSON.stringify(row));
    this.dialogVisible = true;
    this.title = '更新信息';
  }

PS：js中有两种不同的数据类型，一个是基本类型，一个是引用类型，其中Object是引用类型（这里使用的是typescript，原理与js相同）

原文链接：https://blog.csdn.net/SmallTeddy/article/details/106542890

关注