解決elemen ui表單resetFields()方法無法清空問題

1、resetFields()說明

對整個表單進行重置，将所有字段重置為初始值（而不是設定為空值）并移除校驗結果

2、場景

（1）el-form-item沒有加入prop屬性。

（2）el-form表單寫在dialog的彈出框内，假設頁面有個新增、編輯共用這個dialog，在頁面初始化後先點新增，再編輯，正常；如果先編輯，編輯時調用服務端接口擷取資料并指派到表單上，然後新增使用resetFields()，會發現新增的dialog資料沒被清空。

3、産生問題的原因

（1）prop屬性是用于表單校驗的，如果沒加入prop屬性會導緻resetFields()無法清空

（2）當我們先新增再編輯，初始值是空的，調用resetFields()方法自然正常；當我們先編輯再新增，會對表單指派，初始值就是我們賦的值，而這個初始值是在el-form的生命周期mounted被調用的時候指派上去的 ，此時新增打開彈框的話，el-form的mounted是還沒結束，如果在mounted之前給表單指派（這裡可以了解為在created的時候給表單指派，因為created生命周期早于mounted），那麼調用resetFields()方法的時候，表單的指派是不會被重置為空字元的。

4、如何解決？

（1）加上prop屬性即可解決。

（2）加上this.$ ​​ ​​ ​​​​nextTick()方法，編輯時調用服務端接口擷取資料指派的操作要放在this.$nextTick()方法裡，這個時候el-form的mounted已經結束了。

5、this.$​nextTick()方法是如何解決這個問題的？

上面說了mounted之前指派就相當于created的時候給表單指派，而this.$ ​​​​​nextTick()方法主要是用在随資料改變而改變的dom應用場景中，vue中資料和dom渲染由于是異步的，是以，要讓dom結構随資料改變這樣的操作都應該放進this.$​​nextTick()的回調函數中。created()中使用的方法時，dom還沒有渲染，如果此時在該鈎子函數中進行dom指派資料（或者其它dom操作）時無異于徒勞，是以，created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中，而與created()對應的是mounted()的鈎子函數則是在dom完全渲染後才開始渲染資料，是以在mounted()中操作dom基本不會存在渲染問題。