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