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验证

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐