【vue+elementui】对象嵌套数据取值与重置值

数据格式示例：

mulForm: {
    companyId: '',
    wealthNo: '',
    configWealthmanagementproducts: {
        riskLevel: '',
        currencyId: '',
    }
},

问题描述：

1. 嵌套对象内部，通过select切换元素A，连带修改其他元素，控制台报key值重复的错误
2. 第二次进入新增弹窗界面，第一次新增的嵌套对象 configWealthmanagementproducts 内部的值依旧存在，并没有清空重置
3. 编辑弹窗元素，第一次可以取到值，点击取消按钮后再次进入页面，嵌套对象内部值全部被清空
4. 第一次进入编辑页面操作嵌套对象内部元素后退出弹窗界面，第二次重新进入界面，嵌套对象内部属性值混乱

核心代码：

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
}