Vue+elementui dynamically checks according to the radio button option

need

In the radio box, when the selection does not meet the specification, the remark is required (do verification), when the selection meets the specification, the remark can not be filled (no verification)

accomplish

 <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;
          }
        });
      },
}

renderings

 

Guess you like

Origin blog.csdn.net/m0_56471534/article/details/130131637