亲宝软件园·资讯

展开

Vue Element表单resetFields无法重置

我是真的cai 人气:0

问题背景

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

加载全部内容

相关教程
猜你喜欢
用户评论