vue 关闭弹框重新打开时elementui验证规则还在的处理方式

普通页面弹框

图片

html:

<el-dialog

        :title="title"

        :visible.sync="dialogVisible"

        width="990px"

        :before-close="handleCloseCreate"

      >

        <div class="com-dialog-gray-bg">

          <el-form

            :model="inputItem"

            :rules="rules"

            ref="inputItem"

            label-width="150px"

            class="demo-inputItem"

          >

            <el-form-item label="摇一摇活动名称" prop="shakeName">

              <el-input

                v-model="inputItem.shakeName"

                maxlength="30"

                show-word-limit

                placeholder="请输入摇一摇活动名称，30字以内"

              ></el-input>

            </el-form-item>

          </el-form>

        </div>

        <span slot="footer" class="com-dialog-btn">

          <el-button class="dialog-bottom-gray-btn" @click="handleCloseCreate"

            >取消</el-button

          >



          <el-button

            type="primary"

            class="dialog-bottom-blue-btn"

            @click="submitForm('inputItem')"

            :loading="interLoading"

            >{{ submitBottom }}</el-button

          >

        </span>

      </el-dialog>

数据声明:

return {
      dialogVisible: false,
      interLoading: false,
      title: "新建摇一摇活动",
      submitBottom: "新建",
      inputItem: {
        shakeId: "",
        shakeName: "",
      },
      rules: {
        shakeName: [
          {
            required: true,
            message: "请输入摇一摇活动名称，30字以内",
            trigger: "blur",
          },
        ],
      },
    };

js(写在methods中):

    // 关闭新建摇一摇活动

    handleCloseCreate() {

      this.dialogVisible = false;
//注意： 代码中的 inputItem 是你form中的 ref=“inputItem” 中的inputItem，这两个要一致

      this.$refs.inputItem.resetFields();


    },

以下代码在哪里关闭弹框就写在哪里 

//清除所有校验
this.$refs.inputItem.clearValidate();

//触发某个子项的校验
this.$refs.inputItem.validateField('shakeName');//shakeName=>el-form-item上的prop的值

组件弹框

组件 内容

<template>
  <div id="ipadAuthorizationCode " class="com-dialog-style">
    <el-dialog
      width="990px"
      title="批量生成授权码"
      :before-close="codeGroupClose"
      :visible.sync="codeGroupDialog"
    >
      <div class="container">
        <div class="com-dialog-gray-bg">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="生成数量" prop="buildNum" class="payNum">
              <el-input
                v-model="ruleForm.buildNum"
                type="number"
                :disabled="authorizationInfo.isNeedPay"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="list-ipt-text14"
              label="有效期"
              prop="expirationDate"
            >
              <el-date-picker
                v-model="ruleForm.expirationDate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="授权码格式" prop="authorizationCode">
              <el-radio-group
                class="el-radio-white-padding"
                v-model="ruleForm.authorizationCode"
              >
                <el-radio :label="1">纯数字（6位随机数）</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="终端类型">
              <el-radio-group
                class="el-radio-white-padding"
                v-model="ruleForm.terminalType"
              >
                <el-radio :label="1">ipad签到</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="add-table-btn">
          <el-button @click="returnPage">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定生成</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "ipad-authorization-code",
  props: {
    codeGroupDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        activityId: "",
        buildNum: "",
        expirationDate: [],
        authorizationCode: 1,
        terminalType: 1, //终端类型
      },
      rules: {
        activityId: [
          {
            required: true,
            message: "请设置授权码生成数量",
            trigger: "change",
          },
        ],
        buildNum: [
          {
            required: true,
            message: "请设置授权码生成数量",
            trigger: "change",
          },
        ],
        expirationDate: [
          {
            required: true,
            message: "请设置有效时间",
            trigger: "change",
          },
        ],
        authorizationCode: [
          {
            required: true,
            message: "请选择授权码格式",
            trigger: "change",
          },
        ],
      },
      authorizationInfo: {}, //生成授权码判断
      fullscreenLoading: false,
    };
  },

   //清空所有的验证规则复制watch这段内容就可以
    watch: {
    codeGroupDialog: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.$refs['ruleForm'].resetFields()//清空所有的验证规则
          })
        }
      },
    },
  },
  methods: {
    codeGroupClose() {
      this.$emit("saveSubmit", { type: 2 });
    },
    // 批量授权码生成
    saveAuthorizeCodeList() {
 
    },
     //表单提交
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
        
        } else {
        
        }
      });
    },
    // 关闭当前
    returnPage() {
      this.$emit("saveSubmit", { type: 2 });
    },
  },

  computed: {

  },

  mounted() {
   
  },

  created() {},
};
</script>

<style lang="scss" scoped>
.get-more-authorization-codes {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(36, 46, 66, 0.6);
}
.radio-border {
  margin-right: 0.24rem;
}
.payNum {
  position: relative;
}
.payNums {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 32px;
  color: #f56c6c;
}
.payImg {
  text-align: center;
  background: #f7f9fc;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 30px 0;
  margin-top: 20px;
}
.warmTip {
  margin-top: 0.3rem;
  padding: 24px;
  background: #f7f9fc;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.warmTipTitle {
  line-height: 1;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  font-weight: 500;
  color: #242e41;
}
.warmTips {
  margin-top: 16px;
  line-height: 20px;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #606266;
}
.payImgBtn {
  margin-top: 30px;
}
.payImgBtnOne {
  background: rgba(36, 46, 65, 0.1);
  color: #242e41;
}
</style>

组件调用

<template> 
   <div class="batchReviewDialog">
      <ipad-authorization-code
        :codeGroupDialog="codeGroupDialog"
        @saveSubmit="saveSubmit"
      ></ipad-authorization-code>
    </div>
</template>
export default {
  name: "ipad-authorization-code",
  components: {
   
    "ipad-authorization-code": () =>
      import("@/components/sign-in-management/ipad-authorization-code.vue"),//引入组件
  },
  data() {
    return {
      codeGroupDialog: true,//默认显示弹框
    };
  },

  methods: {
//组件方法
    saveSubmit(data){
}
  },

  computed: {

  },

  mounted() {
   
  },

  created() {},
};
</script>