element UI表单中数组循环验证必填方法

表单内有部分数据是通过数组循环展示出来的,需要对循环出来的表单进行验证,方式如下:

<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:''},
                ]
            },
    }
}

通过以上方法即可实现表单内数组数据的验证啦!!!

测试有效!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值