element-ui組件dialog遇到form

Vue.js似乎成了一種潮流。

UI框架element-ui也跟着成了一種潮流，不過得承認，至少我個人還是非常認可的，element-ui做的是真不錯。

用到element-ui，那么在dialog中搭配form就必不可少。

<el-dialog
    :visible.sync="visible"
    title="彈窗"
    :before-close="beforeClose"
    @open="openDialog"
    width="480px"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item
        label="操作人"
        prop="operator"
      >
        <el-input
          placeholder="請輸入操作人"
          v-model.trim="form.operator"
        ></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="submit"
        type="primary"
        class="btn-custom"
      >
        <span>確 定</span>
      </el-button>
    </div>
  </el-dialog>

彈窗內有form表單，而且這個表單需要校驗，那么如果目前輸入框校驗報錯之后，或者輸入之后，關閉彈窗了，在當前頁面，再次打開該彈窗，會顯示上一次的輸入值以及報錯提示。

這就產生了一個小需求，彈框打開之后，需要把所有form表單重置為初始狀態。需求很小，也很正常，然而解決這個問題，前期走了很多彎路。

查看一下，dialog的事件：

Events

事件名稱	說明	回調參數
open	Dialog 打開的回調	——
opened	Dialog 打開動畫結束時的回調	——
close	Dialog 關閉的回調	——
closed	Dialog 關閉動畫結束時的回調	——

那么只能從這4個事件中考慮，要不在打開彈窗的時候，清除數據。要不在關閉彈窗的時候，清除數據。

比對之后，結合需求，可以考慮open，在彈框打開時清除數據，closed，彈框已經完全關閉之后，清除數據。

最開始，我是在closed之后，清除form表單的數據的。

在el-dialog標簽上添加：

@closed="closeDialog"

添加方法：

closeDialog (formName) {
	this.$refs[formName].resetFields()
}

這里容易產生一個新的問題，如果需要向上層組件傳遞form表單內用戶填充的數據：
this.$emit('sendFormData', this.form)
也就是點擊Form表單的提交按鈕，需要干兩件事:sendFormData和resetFields，這時，不管這段代碼如何組織，在上層組件當中，接收到的值，必然是resetFields之后的值。

所以，必須要把這兩件事分開來干，sendFormData放在close事件當中，或者before-close屬性當中，然后在closed事件當中，再進行resetFields。

亦或者，在closed事件中，進行this.$emit('sendFormData', this.form)操作，然后在dialog open的時候，this.$refs[formName].resetFields()。

這里有一點需要注意的是：

在第一次打開彈窗的時候，會產生一個錯誤提示

產生這么個錯誤的原因在於，初次打開彈窗，DOM節點還沒有渲染完成，這時是取不到this.$refs[formName]的，那么跟着他調用resetFields這個函數，必然會報錯。加一個簡單的判斷即可，if(this.$refs[formName]) this.$refs[formName].resetFields()。

曾經踩過的坑，或者說還在踩着的坑，希望對即將會踩到的坑的同學們，有所幫助。