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()。

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