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 () ) )
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