前言

由于最后在做公司后台在使用 element-ui 框架,开发过程中出现 resetFields 表单无法重置的问题,在此记录下解决的办法,也能帮助到以后的同学少踩点坑

1.问题重现

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

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

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

那么在默认情况下,我们先点击了 “编辑”


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

这个时候你会发现刚刚赋值过的数据还遗留在表单里面,有人会说我在弹框关闭的时候执行重置不就行了,但是这个时候你会发现并没有效果
1
this.$refs['formName'].resetFields()

2.关于resetFields()方法

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

3.解决办法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

}