Element UI表单中数组循环验证必填方法
表单内有部分数据是通过数组循环展示出来的,需要对循环出来的表单进行验证,方式如下:
1 <div class="material-list" v-for="(item,index) in model.materialList" :key="index"> 2 <el-form-item label="类型" :prop="`materialList.${index}.materialType`" :rules="{ required: true, message: '请选择类型',trigger: 'change'}"> 3 <el-select v-model="item.materialType" placeholder="请选择类型" style="width:230px" @change="Change" :remote-method="remoteMethodmaterialType" filterable remote> 4 <el-option 5 v-for="(item,index) in materialTypeList" 6 :key="index" 7 :label="item" 8 :value="item"> 9 </el-option> 10 </el-select> 11 </el-form-item> 12 </div>
解析:首先循环model里边的数组materialList,然后在el-form-item标签的prop验证中添加验证的字段为materialList数组下的字段名(通过index索引来获取)
数据格式,如下:
data(){ return{ model: { billId: '',picker: '',remark: '', materialList: [ {materialType: '',brand:'',material: '',unit:'',specificationModel:'',materialId: '',actualNumber:''}, ] }, }
本文来自博客园,作者:南風未起,转载请注明原文链接:https://www.cnblogs.com/Andy-Blog/p/18925177

浙公网安备 33010602011771号