数据复制,会使两个不同的数据关联绑定的问题

通过对table 添加

@row-click="getDetails"

并在methods中添加方法:

getDetails(row) {
      this.rowData = row;
      console.log(row);
}

即可点击获取到当前行的所有数据。

在方法中对rowData 进行了赋值,以保证操作数据时不直接对原数据进行修改。

遇到的问题:

当修改rowData中的数据,tableData中的数据会随之修改。

以至于在模态框中修改数据,会直接渲染到页面表格中。

解决办法:

 getDetails(row) {
      // this.rowData = row;
      this.rowData.id = row.id;
      this.rowData.name = row.name;
      this.rowData.age = row.age;
      console.log(row);
    }

在点击当前行的事件中,对属性一个一个的赋值即可。

有没有大佬能够分析一下,造成这种情况的原因是什么。

已经找到问题所在:
因为 row 是个Object类型的数据,若使用 = 赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),rowData 使用相同的数据地址,互相引起数据值的变化

getDetails(row) {
this.rowData = JSON.parse( JSON.stringify( row ) ) );
console.log(row);
}