问题重现

在做后台在使用 element-ui 框架，开发过程中出现 resetFields表单无法重置的问题。因 “添加” 和 “编辑” 字段是一样的，所以我把它们放在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了。
重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容

this.$refs[‘form’].resetFields()方法重置表单无效的坑

1、用法不对

要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。

注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。

2、坑1

在还没有显示对话框之前就调用this.$refs[‘form’].resetFields()，会报错。

解决方法：

1
2
3
this.$nextTick(() => {
    this.$refs['form'].resetFields();
});

3、坑2

如果添加和修改共用一个表单时就会出现重置无效的情况。

解决方法：

1
2
3
this.$nextTick(() => {
    utils.copyFormObject(data, this.form);
});

将为表单对象赋值的操作放在对话框显示之后的一个执行周期执行。

4、为什么要放在$nextTick()中就可以了

this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，如果修改对象的表单赋值没有放在nextTick中，就会在表单渲染时就会将这个修改对象作为初始值，所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。