vue+element-ui this.$refs['form'].resetFields()方法重置表單無效的坑

1、用法不對

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

2、坑1

在還沒有顯示對話框之前就調用this.$refs['form'].resetFields()，會報錯。

解決方法：

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

3、坑2

如果添加和修改共用一個表單時就會出現重置無效的情況。

解決方法：

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

將為表單對象賦值的操作放在對話框顯示之后的一個執行周期執行。

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

this.$refs['form'].resetFields()這個做法其實是重置表單到初始值，不是清空表單，當表單第一次在頁面中渲染時所用的數據就是初始數據，如果修改對象的表單賦值沒有放在nextTick中，就會在表單渲染時就會將這個修改對象作為初始值，所以出現無效了。使用nextTick保證表單在第一次渲染時是空值就可以了。