Vue+Element-ui表单resetFields无法重置问题

问题背景

在开发中自己使用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()就可以了。