vue+elementui 根据单选框选项动态校验

需求

单选框中，当选择不符合规范时，备注为必填项(做校验)，当选择符合规范时，备注可以不填写(不做校验)

实现

 <el-form :model="ruleForm"  ref="ruleForm">
      <div class="handel-remarks">

        <el-form-item label="" prop="standard" :rules="rules.standard">
          <el-radio-group v-model="ruleForm.standard">
            <el-radio v-model="ruleForm.standard" label="PASS"
              >符合规范</el-radio
            >
            <el-radio v-model="ruleForm.standard" label="REFUSE"
              >不符合规范</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="remark" :rules="ruleForm.standard === 'REFUSE' ?  rules.remark : [{ required: false}] ">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4 }"
            maxlength="200"
            v-model="ruleForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>

        <div class="handel-btn">
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submitHandel('ruleForm')"
              >确定</el-button
            >
          </div> 
      </div>
    </el-form>

  data() {
    return {
      ruleForm: {
        standard: "", //是否符合规范
        remark: "", //备注
      }, 
      rules: {
        standard: [
          { required: true, message: "请选择是否符合规范", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          {
            min: 1,
            max: 1000,
            message: "长度不能超1000",
            trigger: "blur",
          },
        ],
      },
    };
  },
 methods: {
      submitHandel(ruleForm) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
}

效果图