prop里面的值和v-model中的值一一對應(yīng)時(shí)，表單的校驗(yàn)會生效
那么動(dòng)態(tài)生成的表單如何添加校驗(yàn)
1.修改prop值
2.給每一個(gè)表單項(xiàng)添加rules驗(yàn)證
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' }
]
}
}
