Vue浅拷贝导致修改表单时列表数据变化问题

项目场景：

项目场景：更新某一条列表数据时，直接获取到列表某一行数据进行修改（不需要去查询数据详情）

---

问题描述

更改表单值时，列表中的数据随之改变

给修改弹窗中的form表单赋值代码：

// 修改收件地址
function handleEdit(row) {
  state.form = row
  form.value.area = [row.receiveProvince, row.receiveCity, row.receiveArea, row.receiveStreet]
  state.dialog = {
    title: '修改收件地址',
    visible: true
  }
}

---

原因分析：

直接将row（当前行）的值复制给表单（form）对象，即将row对象浅拷贝给form，row是引用类型数据，因此只是将row对象的地址复制给form，并没有创建新对象，所以在修改form的值时，会影响row。

---

解决方案：

进行深拷贝，将row进行解构赋值，解构赋值时会创建新对象。

// 修改收件地址
function handleEdit(row) {
  // state.form = row
  // 解构赋值
  state.form = { ...row }
  form.value.area = [row.receiveProvince, row.receiveCity, row.receiveArea, row.receiveStreet]
  state.dialog = {
    title: '修改收件地址',
    visible: true
  }
}