封装编辑表单的数据回掉

在前端项目中,编辑某个表单项的时候,我们需要对表单项进行数据回调方便操作
但是如果直接把页面表单数据直接给编辑表单数据,这种时候回出现一种bug,
假如,我编辑完之后,没有进行提交,而且不刷新页面的话,这个表单项仍然是编辑后的样子

为什么会出现这种情况?
我们赋值的是地址,而不是新的变量!

解决办法,封装一个回调用的赋值方法
1.

//快速把obj1里面对应的数据复制到obj2
export default async function objCopy(obj1,obj2){
Object.keys(obj2).forEach(key =>{
obj2[key] = obj1[key]
})
}

在main.js中全局引用该对象赋值方法

//导入快速复制对象工具
import objCopy from '@/utils/objCopy'
Vue.prototype.$objCopy = objCopy;

handleEdit(row) {
//数据回显
this.$objCopy(row, this.dept);
//设置窗口标题
this.deptDialog.title = "编辑部门";
//显示编辑部门窗口
this.deptDialog.visible = true;
}