新建、編輯共用一個對話框時表單項驗證清空

一、使用場景：

新建和編輯因爲表單內容通常相同，每每能夠用同一個對話框，可是這樣在有表單驗證的需求下，同時會引起一個問題：觸發了表單驗證，再點擊【新建】或者【編輯】的時候，表單驗證沒法清空。針對這種使用場景，本文提出了3種方法，首先做以下定義：

對話框groupDialog

表單爲groupForm

二、方法實現

對話框代碼：

<el-dialog :visible.sync="groupDialog" width="420px">
    <span slot="title" class="title">{{diaType}}分組</span>
    <el-form
      :model="groupForm"
      ref="groupForm"
      :rules="rules"
      class="group-form"
      label-width="100px"
      size="mini">
      <el-form-item label="名稱：" prop="name">
        <el-input
          class="input-width"
          placeholder="請輸入"
          v-model="groupForm.name">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitRangeForm('groupForm')">確 定</el-button>
    </div>
</el-dialog>
複製代碼

方法一：setTimeout

/**
 * 對話框 新建、編輯
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  this.$refs['groupForm'].clearValidate();
}
複製代碼

會有報錯提示TypeError: Cannot read property 'clearValidate' of undefined

這是由於執行到這條語句的時候，表單尚未初始化完成。因此咱們想到了setTimeout，

若是不加第二個參數，默認延遲時間爲0，即表示當即執行，但這不影響它仍然是一個異步函數。

/**
 * 對話框 新建、編輯
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  setTimeout(() => {
    this.$refs['groupForm'].clearValidate();
  });
}
複製代碼

方法二：nextTick

可是setTimeout是一個異步方法，vue提供了nextTick方法用於在dom加載完成之後，進行一些賦值操做

/**
 * 對話框 新建、編輯
 */
showDialog(rowData, from) {
  this.groupDialog = true;
  this.$nextTick(() => {
    this.$refs['groupForm'].clearValidate();
  });
}
複製代碼

前兩種都是在打開對話框之後，去清空表單驗證 方法三是在對話框關閉以前，去清空表單驗證

方法三：before-close

這種方法中因爲對話框以及表單已經所有初始化完成，因此不會存在上述因爲表單沒有加載徹底而引發的【方法未定義】的報錯 對於模態對話框來講，一共有3處可使對話框關閉。

一、點擊關閉按鈕

二、點擊遮罩層外部任意位置

三、點擊【取消】按鈕。

四、點擊【肯定】按鈕，請求成功。

在這4個位置都去調用同一個語句：

this.$refs['groupForm'].clearValidate();
複製代碼

因此能夠將其封裝成一個公用的方法，每次須要的時候都去調用它。

一、2可使用before-close：

before-close 僅當用戶經過點擊關閉圖標或遮罩關閉 Dialog 時起效
複製代碼

對話框代碼作相應調整

<el-dialog :visible.sync="groupDialog" width="420px" :before-close="handleClose">
    <span slot="title" class="title">{{diaType}}分組</span>
    <el-form
      :model="groupForm"
      ref="groupForm"
      :rules="rules"
      class="group-form"
      label-width="100px"
      size="mini">
      <el-form-item label="名稱：" prop="name">
        <el-input
          class="input-width"
          placeholder="請輸入"
          v-model="groupForm.name">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitRangeForm('groupForm')">確 定</el-button>
    </div>
</el-dialog>
複製代碼

定義一個新方法
 handleClose() {
    this.$refs['groupForm'].clearValidate();
}
複製代碼

三、總結

第一種方法，用到了setTimeout，異步方法通常不推薦。

第三種方法，關閉對話框的場景較多，須要在每處都要調用到，比較繁瑣。

最好的方法，應該屬於第二種，只需在打開對話框的時候清空表單驗證便可。