ElementUI嵌套Form的Dialog如何重置Form

場景

第一次打開頁面時，先點添加按鈕

選中第一行

先點擊添加按鈕，執行resetFields()，重置form，正常。

再點擊修改按鈕，回顯用戶信息，正常。

第一次打開頁面時，先點修改按鈕

選中第一行

先點擊修改按鈕，回顯用戶信息，正常。

再點擊添加按鈕，執行resetFields()，沒有重置form，異常。

分析

官方文檔的描述是重置爲初始值。在建立form對象時，使用model綁定的表單數據對象，在form對象的mounted時期記錄了下來第一次使用的表單數據對象，這個表單數據對象就是初始值，每次調用resetFields()重置表單，都是使用這個初始值，因此重置並非清空。

<el-form ref="form" :model="form" label-width="80px">
... ...
</el-form>

解決

先調用resetFields()重置表單並移除校驗結果，而後將表單數據對象置空。

resetEntityForm: function () {
    this.$nextTick(function () {
        this.$refs.entityForm.resetFields();
        for (var key in this.entity) {
            if (this.entity.hasOwnProperty(key)) {
                this.entity[key] = '';
            }
        }
    });
}

參考：
解決 ElementUI form表單在dialog中重置表單，沒法正確重置的問題
elementui-清除彈框中表單的默認值-resetFields()
element-ui 表單清空 resetFields 方法清空表單中的坑