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