问题描述
新增和编辑是同一个表单。
先新增后编辑,编辑弹框可以正常赋值;
先编辑后新增,新增弹框会初始化编辑的数据;
解决办法
编辑时回显数据时,使用this.nextTick()进行包裹。
editItem(rows){
this.editId = rows.id
this.dialogTitle = '更新'
// 打开对话框
this.dialogVisible = true
this.$nextTick(()=> {
// 数据回显
this.userInfo = {...rows}
})
},
问题解析
根据文档显示,resetFields是对整个表单进行重置,将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage,然后把值重置成了上一次初始化的值。
如果你编辑时,第一次打开dialog的时候给表单绑定的model赋值了,这时候这个model的初始值就变成了你所赋值的值,所以resetFields的时候,会将model对应的每个值重置到初始值,这时候的初始值就是你编辑时赋值的那个值。
所以:页面一进入, form表单就是原始的。点击编辑后,会一个个给form进行赋值,那么重置时,就会重置给给form赋值后的效果。
resetFields()方法是初始化值,并不是清空所有值。这个初始值是在form mounted生命周期被赋值上去的。所以,在form mounted之前,如果form表单赋值了,那么后面调用resetFields()都是无效的,因为form表单的初始值已经在mounted之前就被赋值了。