1.問題重現(xiàn)
因 “添加” 和 “編輯” 字段是一樣的抱既，所以我把他們做在了一個彈框表單里面听怕，也節(jié)省了代碼資源開銷捧挺，如果你是分開寫的彈框也就不會出現(xiàn)這個問題了
通常情況下，我們在制作后臺管理頁面的時候經(jīng)常會遇到以下操作 “新增尿瞭、編輯” 等等操作闽烙，那么在編輯的時候我們通常會取到當(dāng)前行的數(shù)據(jù)而進行賦值操作
觸發(fā)bug的條件是先打開，編輯進行賦值声搁，后打開新增
這個時候我們關(guān)掉彈框再去打開 “新增”
這個時候你會發(fā)現(xiàn)剛剛賦值過的數(shù)據(jù)還遺留在表單里面黑竞，有人會說我在彈框關(guān)閉的時候執(zhí)行重置不就行了，但是這個時候你會發(fā)現(xiàn)并沒有效果
this.$refs['formName'].resetFields()
2.關(guān)于resetFields()方法
- 1疏旨、此方法用于將form表單的數(shù)據(jù)設(shè)置為初始值
- 2很魂、而這個初始值是在form mounted生命周期被賦值上去的
- 3、所以充石，在 form mounted之前莫换，如果給form表單賦值了，那么后面調(diào)用resetFields()都是無效的骤铃，因為form表單的初始值已經(jīng)在 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
})
},
// 關(guān)閉編輯
onClose() {
// 后面我們只需在彈框關(guān)閉的時候再執(zhí)行 resetFields() 方法就行了
this.addUserDialogFlag = false
this.$refs['formName'].resetFields()
}
}
