需求
单选框中,当选择不符合规范时,备注为必填项(做校验),当选择符合规范时,备注可以不填写(不做校验)
实现
<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;
}
});
},
}
效果图