数据格式示例:
mulForm: {
companyId: '',
wealthNo: '',
configWealthmanagementproducts: {
riskLevel: '',
currencyId: '',
}
},
问题描述:
- 嵌套对象内部,通过select切换元素A,连带修改其他元素,控制台报key值重复的错误
- 第二次进入新增弹窗界面,第一次新增的嵌套对象 configWealthmanagementproducts 内部的值依旧存在,并没有清空重置
- 编辑弹窗元素,第一次可以取到值,点击取消按钮后再次进入页面,嵌套对象内部值全部被清空
- 第一次进入编辑页面操作嵌套对象内部元素后退出弹窗界面,第二次重新进入界面,嵌套对象内部属性值混乱
核心代码:
methods: {
editOne(type, row) {
this.choose = type
this.$set(this.form, 'businessType', this.buyList[0].id)
if (type === 'edit') {
// 点击编辑按钮时深拷贝对象,解决问题3,问题4
let copyRow = deepCopy(row)
this.form = {
...copyRow,
}
this.$set(this.form, 'buyDate', this.formatterTime(row.buyDate))
this.$set(this.form, 'exceptEndDate', this.formatterTime(row.exceptEndDate))
console.log(this.form)
}
this.dialogVisible = true
},
cancelMethod() {
this.dialogVisible = false
// 深拷贝原对象,避免间接修改原对象,解决问题2
let obj = deepCopy(this.form.configWealthmanagementproducts)
// 遍历清空嵌套对象的内部属性值,解决问题1
for (let key in obj) {
obj[key] = ''
}
this.form = {
configWealthmanagementproducts: {},
}
this.$refs['form'].resetFields()
},
}
- 对象的深拷贝VS浅拷贝:前者原对象不会被影响,后者修改拷贝的对象,原对象也会被随之修改
补充:对象的深拷贝
export function deepCopy(obj) {
if (obj == null) {
return null
}
let result = Array.isArray(obj) ? [] : {}
for (let key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
if (typeof obj[key] === 'object') {
// 如果是对象,再次调用该方法自身
result[key] = deepCopy(obj[key])
} else {
result[key] = obj[key]
}
}
}
return result
}