bug修复-在表单中做编辑时表格中数据也跟着变

问题

在表单中做编辑时，表格中数据也跟着变

原因

这里有一个引用关系： this.roleForm和row指向同一个对象，改了一个，另一个也受影响

hEdit(row){
    this.roleForm = row
}

示意图如下

上面的这种写法俗称：浅拷贝（把地址赋值给地址）

拷贝：就是赋值，让两个元素一样。

让小王和你有一样的电动车

浅拷贝：配了一把你电动车的钥匙给小王

深拷贝：送一同款电动车给小王

解决

把浅拷贝改成深拷贝

this.roleForm = { ...row }同上

优化一下写法：

   hEdit({ id, name, description }) {
      // 1. 把当前的数据直接给表单
      // this.roleForm = row
      // this.roleForm = { id: row.id, name: row.name, description: row.description }
      this.roleForm = { id, name, description }
      // 2. 显示弹层
      this.showDialog = true
      // console.log(row)
      // this.roleForm = {...row}
​
      // 3. 设为编辑状态
      this.isEidt = true
    },