循环数据进行表单验证

使用表单验证，如需进行表单某个单独元素验证，在表单el-form添加rules规则，相应的元素对应相应的prop值，即可进行表单元素验证。

但是当表单中的某项需要通过循环渲染出来，上面的方法就行不通了。

解决方法：
1.在循环内，给循环体内的item元素，单独绑定表单验证规则。item元素prop属性值为 所循环的数组名称+当前元素索引+元素在数组中的名称。 rules绑定的验证规则，在其相应的数组下，或单独创建一个验证对象，写入页面data数据中即可。（下例为在data中独立创建了一个名为buildingRules的对象，添加表单验证规则）。

<div v-for="(bItem,bIndex) in addForm.infoBos" :key="bIndex" class="building">
    <el-form-item :prop="`infoBos.${bIndex}.sn`" :rules="buildingRules.sn" label="编号">
             <el-input v-model="bItem.sn" placeholder="请输入编号" style="width: 200px"/>
    </el-form-item>
</div>

data(){
addForm: {
    infoBos:[...]
    },
buildingRules: {
        sn: [
          { required: true, message: '请输入楼栋编号', trigger: 'blur' }
        ]
}
}

若需要在多层循环嵌套内进行表单验证

<div v-for="(item,index) in addForm.infoBos" :key="index" class="building">
    <div v-for="(bItem,bIndex) in bItem" :key="bIndex">
        <el-form-item :prop="`infoBos.${index}.bitem.${bIndex}.sn`" :rules="buildingRules.sn" label="编号">
                 <el-input v-model="bItem.sn" placeholder="请输入编号" style="width: 200px"/>
        </el-form-item>
    </div>
</div>