prop里面的值和v-model中的值一一对应时,表单的校验会生效
那么动态生成的表单如何添加校验
1.修改prop值
2.给每一个表单项添加rules验证
model:
<el-form class="pac-form"
:model="goodsNameForm"
:rules="goodsNameFormRules"
ref="goodsNameFormRef">
<div class="pac-wrap" v-for="(pItem,pIdx) in goodsNameForm.pacList" :key="pItem.goodsId">
<el-form-item :prop="`pacList[${pIdx}].parcelLength`" :rules="goodsNameFormRules.parcelLength">
<el-input-number :precision="1" :max="1000" :controls="false" v-model="pItem.parcelLength" size="small" clearable @change="changeVolume(pIdx)"></el-input-number>
</el-form-item>
</div>
</el-form>
data:
goodsNameForm: {
pacList: [{
"goodsWeight":undefined,
"id":0,
"parcelHigh":undefined,
"parcelLength":undefined,
"parcelVolume":undefined,
"parcelWidth":undefined,
"isSpand":true,
"expressOrderGoodsList":[
{
"currencyType": "",
"goodsName": "",
"goodsQTY": undefined,
"goodsType": "",
"goodsValue": undefined,
"orderId": 0
}
]
}],
}
computed
'goodsNameFormRules' () {
return {
parcelLength: [
{ required: true, message: this.$t('is.null'), trigger: 'blur' }
],
goodsQTY: [
{ required: true, message: this.$t('is.null'), trigger: 'blur' }
]
}
}