转载自——林间有风
1.问题重现
因 “添加” 和 “编辑” 字段是一样的，所以我把他们做在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了
通常情况下，我们在制作后台管理页面的时候经常会遇到以下操作 “新增、编辑” 等等操作，那么在编辑的时候我们通常会取到当前行的数据而进行赋值操作
触发bug的条件是先打开，编辑进行赋值，后打开新增
那么在默认情况下，我们先点击了 “编辑”
这个时候我们关掉弹框再去打开 “新增”
这个时候你会发现刚刚赋值过的数据还遗留在表单里面，有人会说我在弹框关闭的时候执行重置不就行了，但是这个时候你会发现并没有效果
1 |
this.$refs['formName'].resetFields() |
2.关于resetFields()方法
- 此方法用于将form表单的数据设置为初始值
- 而这个初始值是在form mounted生命周期被赋值上去的
- 所以，在 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()
}
}
|