1. 程式人生 > >解決 ElementUI form表單在dialog中重置表單,無法正確重置的問題

解決 ElementUI form表單在dialog中重置表單,無法正確重置的問題

問題描述:

在用ElementUI做動態表單時,資料的修改都是開啟dialog(子元件)中進行操作的,但是在修改資料時,正常來說可以直接呼叫 this.$refs[str].resetFields() 直接清空,但是這裡會出現一個問題:

**form表單的重置是以第一次開啟的資料作為重置標準,如果先開啟的是更新,那麼重置之後以第一次更新的資料作為標準;
Dialog 中的內容是懶載入的,目前 edit (更新)方法的寫法導致 Form 剛加載出來時值就已經是新的了,所以 resetFields 也只能回到新值**

解決方案

  1. 利用v-if的特性,進行form的銷燬和重建,強行讓每一次改操作拿到的資料為父元件傳過來的初始值。
  <el-dialog title="編輯" :visible.sync="isshow" left v-if='isshow'>
2. 用 nextTick 處理一下form的資料`這裡寫程式碼片`
this.$nextTick(() => {
          this.form.user_id = "111";
          ...
       });