vue+ElementUI 닫기 대화 상자 비우기 인증, 폼 지우기

앞에서 말씀드렸듯이elementUI 검증 문제를 말씀드렸습니다. 그러면 오늘은 클릭 대화상자와 닫기 단추를 누르면 어떻게 검증을 비우는지, 폼을 비우는지, 두 번의 클릭을 피하면 검증 오류가 있는지 힌트를 드리겠습니다.
1. 우선 대화상자 취소 단추에 클릭 이벤트를 추가합니다. 예를 들어 (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 폼을 지우는 작업은 모든 내용을 공유하는 것입니다. 참고해 주시고 저희를 많이 사랑해 주십시오.