2021-08-13 解决element-ui resetFields 无效的问题

1.问题重现

因 “添加” 和 “编辑” 字段是一样的，所以我把他们做在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了

通常情况下，我们在制作后台管理页面的时候经常会遇到以下操作 “新增、编辑” 等等操作，那么在编辑的时候我们通常会取到当前行的数据而进行赋值操作

触发bug的条件是先打开，编辑进行赋值，后打开新增

这个时候我们关掉弹框再去打开 “新增”

这个时候你会发现刚刚赋值过的数据还遗留在表单里面，有人会说我在弹框关闭的时候执行重置不就行了，但是这个时候你会发现并没有效果

this.$refs['formName'].resetFields()

2.关于resetFields()方法

• 1、此方法用于将form表单的数据设置为初始值
• 2、而这个初始值是在form mounted生命周期被赋值上去的
• 3、所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

3.解决办法

所以我们要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了
在点击编辑赋值的时候使用 “this.$nextTick” 方法即可

methods: {

    // 打开编辑
    onTableItemUpdate(item) {
        this.addUserDialogFlag = true
        this.dialogTitle = '修改用户'
        this.currentTableItem = item
        // 解决resetFields()方法无效的问题
        this.$nextTick(() => {
            this.addForm.nickname = item.name
            this.addForm.username = item.username
            this.addForm.department = getDepartmentParentIds(item.deptId, this.treeList.slice())
            this.addForm.departmentValue = item.deptId
            this.addForm.userType = item.userType
            this.addForm.email = item.email
            this.addForm.status = item.status
            this.addForm.role = item.roleIds
        })
    },

    // 关闭编辑
    onClose() {
        // 后面我们只需在弹框关闭的时候再执行 resetFields() 方法就行了
        this.addUserDialogFlag = false
        this.$refs['formName'].resetFields()
    }

}