根据select动态选择校验input

场景重现：选择审核通过，不需要输入审核理由，选择不通过，需要输入审核理由

 

 思路：1、网上搜的：利用计算属性。2、利用动态绑定rules

具体实现：1.：required:"isHaveTo"

<el-form-item prop="checkFlag" label="审核结果">
    <el-select v-model="formData.checkFlag" placeholder="请选择">
       <el-option label="通过" :value="1"></el-option>
       <el-option label="不通过" :value="2"></el-option>
    </el-select>
</el-form-item>
<el-form-item prop='checkReason' label='审核理由' :required="isHaveTo">
    <el-input type='textarea' v-model='formData.checkReason' placeholder="请输入审核理由" maxlength="50" show-word-limit/>
</el-form-item>

data() {
    let validateCheckReason=(rule,value,callback)=>{
      if(this.formData.checkReason == null&& this.isHaveTo){
        callback(new Error("请输入审核理由"))
      }else{
        callback()
      }
    };
    return {
      tribeId: '',
      queryParams: {},
      formData: {},
      visible: false,
      rules:{
        checkReason:[{validator:validateCheckReason}],
        checkFlag:[{required: true, message: "请选择", trigger: "change"}]
      }
    }
  },
  computed:{
    isHaveTo(){
      return this.formData.checkFlag === 2
    }
  },

2、:rules 

<el-form-item prop='checkReason' label='审核理由' :rules="formData.checkFlag == 2 ? rules.checkReason : [{required: false}]">
    <el-input type='textarea' v-model='formData.checkReason' placeholder="请输入审核理由" maxlength="50" show-word-limit/>
</el-form-item>

rules:{
        checkReason:[{required: true, message: "请输入审核理由", trigger: "blur"}],
        checkFlag:[{required: true, message: "请选择", trigger: "change"}]
      }