标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。
首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。
然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。
首先是添加rules规则，这个和正常添加规则一样：
productGroupRules: {
productGroupNum: [{required:true, message:'请填写商品数量', trigger:'blur'`}],
productGroupPrice: [{required:true, message:'请填写优惠价格', trigger:'blur'`}]
}
然后给表单项添加验证，以商品数量为例：
<el-form-item label="商品数量:":prop="'productGroup.'+index+'.num'":rules="productGroupRules.productGroupNum">
<el-input v-model="item.num"type="number"size="small" style="width:80px;"></el-input>
</el-form-item>
- 注意
这里:rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGroupRules里的内容。
另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。
另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里：
form: {
activityName: ''``,
status: '1'``,
productGroup: [{num:``""``,price:``""``}]
}
如果是：
form: {
activityName: ''``,
status: '1'
},
productGroup: [{num:``""``,price:``""``}]
是无法验证的，这一点也要注意。
好了，以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了，希望能帮助到遇到此问题的同学。
我自己的代码：
<el-form
:inline="true"
ref="carBussInsureSinglenfoForm"
label-width="120px"
:model="carBusinessInsurance"
>
<el-row
v-for="(item,index) in this.carBusinessInsurance.businessInsuranceArray"
:key="index"
>
<el-col :span="3" :offset="1">
<el-checkbox
v-model="item.isSelected"
@change="insturanceSelecteAction(item)"
>{{item.insuranceName}}</el-checkbox>
</el-col>
<el-col :span="6">
<el-form-item class="deduction" label="是否有不计免赔">
<el-switch
v-model="item.isSelectedSwitch"
active-text="有"
inactive-text="无"
:disabled="!item.isSelected"
></el-switch>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="保费金额"
:prop="'businessInsuranceArray.'+index+'.amount'"
:rules="carBusinessInsuranceRules.amount"
>
<el-input v-model="item.amount" placeholder :disabled="!item.isSelected"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="最高赔付金额"
:prop="'businessInsuranceArray.'+index+'.maxPayAmount'"
:rules="carBusinessInsuranceRules.maxPayAmount"
>
<el-input v-model="item.maxPayAmount" placeholder :disabled="!item.isSelected"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
data
carBusinessInsurance: {
businessInsuranceArray: []
},
rules
carBusinessInsuranceRules: {
amount: [
{
pattern: /^([1-9]\d*(\.\d[1-9]?|\.\d*0)?|0\.[1-9][1-9]?|0\.0[1-9]|0)$/,
message: "输入项只能为大于或者等于0的数字，且最多保留两位小数"
}
],
maxPayAmount: [
{
pattern: /^([1-9]\d*(\.\d[1-9]?|\.\d*0)?|0\.[1-9][1-9]?|0\.0[1-9]|0)$/,
message: "输入项只能为大于或者等于0的数字，且最多保留两位小数"
}
]
