表单内有部分数据是通过数组循环展示出来的,需要对循环出来的表单进行验证,方式如下:
<div class="material-list" v-for="(item,index) in model.materialList" :key="index">
<el-form-item label="类型" :prop="`materialList.${index}.materialType`" :rules="{ required: true, message: '请选择类型',trigger: 'change'}">
<el-select v-model="item.materialType" placeholder="请选择类型" style="width:230px" @change="Change" :remote-method="remoteMethodmaterialType" filterable remote>
<el-option
v-for="(item,index) in materialTypeList"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</div>
解析:首先循环model里边的数组materialList,然后在el-form-item标签的prop验证中添加验证的字段为materialList数组下的字段名(通过index索引来获取)
数据格式,如下:
data(){
return{
model: {
billId: '',picker: '',remark: '',
materialList: [
{materialType: '',brand:'',material: '',unit:'',specificationModel:'',materialId: '',actualNumber:''},
]
},
}
}
通过以上方法即可实现表单内数组数据的验证啦!!!
测试有效!!!