前面跟大家提到過 elementUI驗證的問題，那麼今天就來看看 點選對話方塊和關閉按鈕 怎麼清空驗證，清空form表單，避免二次點選還會有 驗證錯誤的提示

1、首先在你的對話方塊 取消按鈕 加一個click事件，例如：（ps:：callOf裡面的addGroupData和ref一 一對應起來）

<div slot="footer" class="dialog-footer">
　　<el-button @click="callOf('addGroupData')">取 消</el-button>
  <el-button type="primary" @click="addgroupList('addGroupData');">確 定</el-button>
</div> 

2、點選取消按鈕，關閉對話方塊，清除表單驗證

callOf(formName){
　　this.creatGroup = false;
　　this.$refs[formName].resetFields();
}

3、對話方塊右上角的close按鈕（before-close：關閉前的回撥，會暫停 Dialog 的關閉，function(done)，done 用於關閉 Dialog。 location.reload：重新整理整個頁面）

closeDialog(done){
　　this.$confirm('確認關閉？')
　　.then(_ => {
  　　done();
    location.reload();
  })
  .catch(_ => { });
}

這樣就設定好了，不會出現 二次點選時，錯誤提示還遺留在對話方塊上

補充知識：vue中按鈕懸停和選中和更新後自動恢復之前的狀態

廢話不多說，看程式碼~

<template>
//原本的樣式
//點選儲存後的樣式
<Button class="dict-hold" :class="{dict_hold_active:isActive}" @click="saveDict">儲存</Button>
</template>
<script>
   export default {
     data() {
      return{
        isActive:false
      }
    },methods: {
        saveDict() {
         var thiz = this;
         thiz.isActive=true;
         console.log('儲存',this.selectDict);
        if (!this.selectDict || this.selectDict.unid === '0') {
          thiz.$Message.error('更新失敗，請重試');
          return false;
        }
        if (!this.selectDict.dictName) {
          thiz.$Message.error('請輸入字典名稱');
          return false;
        }
        if (this.selectDict.dictSortid == null) {
          thiz.$Message.error('請輸入排序號');
          return false;
        }
        if (!this.currIsType && !this.selectDict.dictValue) {
          thiz.$Message.error('請輸入字典值');
          return false;
        }
        this.$store.dispatch('axios_re',{
          type: 'post',url: '/address/updateDict',data: {
            unid: this.selectDict.unid,dictName: this.selectDict.dictName,},success: function (res) {
            thiz.$Message.success('更新成功');
            thiz.selectDict.title = thiz.selectDict.dictName;
            thiz.isActive=false;
          },fail: function (err) {
            thiz.$Message.error('更新失敗');
            thiz.isActive=false;
          }
        });
        }
      }
   }
</script>
<style lang="scss" scoped>
        .dict-hold {
          margin-left: 35px;
          width: 90px;
          height: 32px;
          background:rgba(57,97,244,1);
          &:hover{
            background-color: #7295FF;
          }
        }
        .dict_hold_active{
          margin-left: 35px;
          width: 90px;
          height: 32px;
          background-color: #7295FF;
        }
</style>

以上這篇vue+ElementUI 關閉對話方塊清空驗證,清除form表單的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。