时间：2022-09-17 10:29:07 | 栏目：vue | 点击：次
在开发中自己使用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()就可以了。