vue+elementUI下拉框动态添加校验

最新推荐文章于 2024-03-25 10:05:46 发布

qq_30198507

最新推荐文章于 2024-03-25 10:05:46 发布

阅读量3k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_30198507/article/details/127613915

版权

1、定义验证提示语

let netReqType = [
  { required: true, message: '需求类型不能为空', trigger: 'change' }
];
let netIssueType = [
  { required: true, message: '问题类型不能为空', trigger: 'change' }
];

2、watch监听

watch: {
  "form.netType": function (val) {
      //工单类型=需求
      if (val == "1"){
        this.showNetReqType = true;
        this.showNetIssueType = false;
        Object.assign(this.rules, {
          netReqType
        });
        //点击提交按钮才触发校验
        //this.$refs.form.validateField(["netReqType"]);
        //this.$refs.form.clearValidate(["netIssueType"]);

        // 添加验证，立即触发校验
        setTimeout(() => { 
          this.$refs.form.validateField(["netReqType"]);
          this.$refs.form.clearValidate(["netIssueType"]);
        }, 1);
      //工单类型=问题
      }else if (val=="2"){
        this.showNetReqType = false;
        this.showNetIssueType = true;
        Object.assign(this.rules, {
          netIssueType
        });
        //点击提交按钮才触发校验
        //this.$refs.form.validateField(["netIssueType"]);         //this.$refs.form.clearValidate(["netReqType"]);
        // 添加验证，立即触发校验
        setTimeout(() => { 
          this.$refs.form.validateField(["netIssueType"]);
          this.$refs.form.clearValidate(["netReqType"]);
        }, 1);
      }
  }
}

3、效果，点击工单类型给问题类型或者需求类型下拉框添加rules验证