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

目录

• 问题背景
• 第一个无法解决重置表单解决方案
• 第二个无法解决重置表单解决方案

问题背景

在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种：

1、组件内表单填写，在 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()就可以了。

到此这篇关于Vue+Element-ui表单resetFields无法重置问题的文章就介绍到这了,更多相关Vue Element表单resetFields无法重置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！