问题描述:
经常有新增和编辑需要复用同一个弹窗的情况;刷新一下页面,先点开编辑关闭弹窗后再点击新增,这个时候再弹窗关闭的时候重置表单方法没有效果:
this.$refs.form.resetFields();
resetFields作用:
1、对整个表单进行重置,字段重置为初始值
2、移除校验结果
问题分析结果:
1、resetFields 重置的是初始值
2、form 的初始值在 mounted 生命周期执行的时候被调用
3、如果在 mounted 生命周期执行之前修改了初始值,那么resetFields 方法会把修改后的值作为初始值
解决方案:
将回显数据放到 setTimeout 或者 nextTick 里面
this.$nextTick(()=>{
//这里赋值回显数据
})
//或者
setTimeout(()=>{
//这里赋值回显数据
}.bind(this),0)
注意: 如果上面还是没有解决问题,建议检查一下你的 el-form-item 元素上是不是添加了 prop 属性。