In el-table-column, row is used to pass parameters, but the result is a two-way binding problem.

​Solution
: The main solution is: JSON.parse((JSON.stringify(row)))//
The problem of deep copying the object: (You can see that the row data in the referenced table is all referenced when entering the edit, but after entering After using the first edited row and the second data row, although the applied data is reset in the editor ( close method ), it has been modified ( showEdit ) when the row is used () ) )
Please add image description

The code target is to pass the current row data as a parameter to the handleEdit method, and then make modifications.

The handleEdit method of the current vue list page

const handleEdit = (row) => {
  state['editRef'].showEdit(row)
}

In modifying the vue page

const showEdit = (row) => {//1.进入编辑时使用的方法
  state.title = '编辑'
  //state.form = row   //之前使用报错的代码
  state.form = JSON.parse((JSON.stringify(row)))//对对象进行深拷贝,不然会实现双向绑定
  console.log(row);
  state.isEdit = true
  state.dialogFormVisible = true
}

const close = () => {//2.在执行完方法退出时调用
  state.form = {
    id: '',
    parentId: '',
    code: '',
    dictKey: '',
    dictValue: '',
    sort: '',
    remark: '',
  }
  state['formRef'].resetFields()
  state.dialogFormVisible = false
}

The main solution is: JSON.parse((JSON.stringify(row)))//Deep copy of the object

Guess you like

Origin blog.csdn.net/qq_40453972/article/details/129829345