问题描述
使用表单对列表的信息进行编辑,点击【取消】按钮关闭表单并调用resetFields清空表单的值。
第一次可以清空,但是再次点击【取消】按钮,表单自动填充第一次表单的值,并没有清空。
解决方法
弹出表单后不要直接对form赋值,将赋值语句放在
this.$nextTick(() => {// 这里对表单进行赋值})
代码示例
handleUpdate (row) {
this.dialogFormVisible = true
this.$nextTick(() => {
this.form = Object.assign({}, row) // 给表单赋值
})
}
cancel () {
this.dialogFormVisible = false
this.$refs['dataForm'].resetFields()
}
原因
这个问题的本质是因为你编辑时,第一次打开dialog的时候给表单绑定的model赋值了,这时候这个model的初始值就变成了你所赋值的值,所以resetFields的时候,会将model对应的每个值重置到初始值,这时候的初始值就是你编辑时赋值的那个值,而不是在data里声明的初始值,解决方式是,等dialog已经初始化mounted之后再给model赋值,也就是
this.$nextTick(() => { // 这里开始赋值 this.form.xxx = xxx; })