北京网站制作开发公司,织梦网站更改网站的导航,做qq空间网站,网页设计报告论文需求#xff1a;有个表单信息是v-for渲染的#xff0c;例如下图#xff0c;通过循环遍历实现新增和删除模块#xff0c;按照平时的写法实现校验#xff0c;是不能实现我们想要的效果#xff0c;根据这个需求#xff0c;我找到了一个解决方法 1.HTML el-form ref有个表单信息是v-for渲染的例如下图通过循环遍历实现新增和删除模块按照平时的写法实现校验是不能实现我们想要的效果根据这个需求我找到了一个解决方法 1.HTML el-form refform :modelform :rulesrules label-width110px div v-for(item,index) in this.form.trucksListdiv classnum{{index1}}./divdiv classflexdiv classinfoel-form-item label服务商 :proptrucksList. index.providerType :rulesrules.providerTypeel-select v-modelitem.providerType placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.label/el-option/el-select/el-form-itemel-form-item label卡车公司 :proptrucksList. index.truckCompany :rulesrules.truckCompanyel-inputv-modelitem.truckCompanyplaceholder请输入卡车公司//el-form-itemel-form-item label预估运输时间 :proptrucksList. index.transportDay :rulesrules.transportDayel-inputv-modelitem.transportDay placeholder请输入预估运输时间//el-form-itemel-form-item label总价 :proptrucksList. index.priceTotal :rulesrules.priceTotalel-inputv-modelitem.priceTotal placeholder请输入总价//el-form-item/div/div/div
/el-form 2.JS data(){return{// 报价表单参数form: {trucksList:[{providerType:,//服务商truckCompany:,//卡车公司transportDay:,//预估运输时间priceTotal:,//总价orderNo: ,//平台订单号}],},// 表单校验rules:{providerType:[{ required: true, message: 请选择服务商, trigger: blur }],truckCompany:[{ required: true, message: 请输入卡车公司, trigger: blur }],transportDay:[{ required: true, message: 请输入预估运输时间, trigger: blur }],priceTotal:[{ required: true, message: 请输入总价, trigger: blur }], },}}, 注
1.循环的数据中每个el-form-item都写rules、prop
2.rules为data中rules对象对应属性如rules.providerType 3.prop的第一部分为data中该组遍历数据对应的数组名此例中为form中的trucksList第二部分为遍历的key值变量第三部分为form中的trucksList中该输入框对应的属性名 只有以上几点写对就可以实现循环数据的表单校验啦
