有的业务会遇到表单的部分字段在特定的情况下发生校验,例如在下面的场景,当你选择了计量单位的时候,重量是必填的,但是不选择计量单位的时候,重量不是必填项,这个时候我们可以用computed来写校验规则:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm" :validate-on-rule-change="false">
<el-row>
<el-col :span="12">
<el-form-item label="计量单位:">
<el-select size="small" v-model="ruleForm.unitId" placeholder="请选择计量单位">
<el-option
v-for="item in matUnits"
:label="item.unitName"
:key="item.unitId"
:value="item.unitId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重量:" prop='meterWeight'>
<el-input size="small" v-model.number="ruleForm.meterWeight" placeholder="请输入重量" @input="change($event)"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
computed:{
rules(){
return {
meterWeight: [
{required: this.ruleForm.unitId ? true : false, message: '请填写重量!', trigger: 'blur' }
],
}
}
},
但是要注意,el-form有个validate-on-rule-change属性默认是true,每一次rules发生变化的时候都会触发一次验证,如果不是业务需要,可以将它设置为false,在提交的时候统一触发校验。
以上,以后遇到这样的业务,就可以使用computed实现简单的表单的动态校验了。