element

element

需求描述：根据不同的运输方式，添加不同的校验字段。那么我们如何添加校验规则呢？

首先我们可以根据不同的运输方式，把对应的校验字段显示在页面上。

<el-formref="form":rules="getRules":model="baseForm"label-width="120px"
><el-row :gutter="20"><el-colv-if="baseForm.assignTransportType === 'HIGHWAY'":span="8"><el-form-itemlabel="车型"prop="carModel">......</el-form-item></el-col></el-row>
</el-form>

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。那如何动态添加校验规则呢？这里我们可以利用 computed 属性，动态添加校验规则和显示对应的字段。

computed: {getRules () {const rule = { // 公共校验字段...}const highRules = { // 动态添加检验字段carModel: { required: true, message: '请选择车型', trigger: 'change' },carHeight: { required: true, message: '请选择车长', trigger: 'change' },}    let ruleList = {}if (['HIGHWAY'].includes(this.baseForm.assignTransportType)) {ruleList = { ...rule, ...highRules }} else {ruleList = rule}return ruleList}
}