问题背景
在开发中自己使用this.$refs[formName].resetFields()
出现无法重置表单的的场景有两种:
1、<Modal/ >
组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]
获取实例就会出现 undefined
的情况。
2、比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 rawValue
赋值就搞定,但是我们从新添加数据之前想重置表单
就无效。
下面说说我遇到上面两种无法重置表单问题的解决方案:
第一个无法解决重置表单解决方案
判断不是undefined
的情况下才会去调用 resetFields
方法:
if (this.$refs["form"] !== undefined) {
this.$refs["form"].resetFields();
}
第二个无法解决重置表单解决方案
回显填充表单数据逻辑写在nextTick
函数的callback
中,nextTick
原理大家可自行搜索就有,不多说。
Vue2.x
fillFormData(rawValue) {
this.$nextTick(() => {
for (let key in this.form) {
if (rawValue[key]) {
this.form[key] = rawValue[key];
}
}
});
},
Vue3.x
import { nextTick } from 'vue';
const fillFormData = () => {
nextTick(()=>{
// 数据回显逻辑
})
}
这样,在添加新的数据之前,再调用一下重置表单resetFields()
就可以了。
好了,如有问题可以在评论区说明。