在vue项目中,使用element-ui的表单校验能节省很多时间,简单的对象表单校验,很简单,使用prop属性就可以直接校验。但是,如果表单项里有通过v-for动态生成的数组对象,又该怎么设置验证呢?
1、总结:
// 简单总结一下:
// 1、prop 属性动态绑定,为model对象下的数据,如formData.trip.days为循环数组:
// 则::model="formData",:prop="'trip.days.'+ index +'.goProvince'"
// 2、在el-form-item 标签上添加 rules 属性,属性值为rules绑定的对象下的值。
// 即::rules="formDataRules.tripGoCity"
2、template示例:
<el-form ref="formData" :model="formData" :rules="formDataRules" label-width="120px">
<div v-for="(item,index) in formData.trip.days" :key="index">
<el-form-item :prop="'trip.days.'+ index +'.goProvince'" :rules="formDataRules.tripGoProvince" label="出发省份">
<el-input v-model="item.goProvince"></el-input>
</el-form-item>
<el-form-item :prop="'trip.days.'+ index +'.goCity'" :rules="formDataRules.tripGoCity" label="出发城市">
<el-input v-model="item.goCity"></el-input>
</el-form-item>
</div>
</el-form>
3、script示例:
data(){
return {
formData: {
trip: {
days: [{
startDate: '',
endDate: '',
phone: ''
}]
}
},
formDataRules: { // 添加校验
tripGoProvince:[
{required: true, message: '请输入出发省份',trigger: 'change'}
],
tripGoCity:[
{required: true, message: '请输入出发城市',trigger: 'change'}
],
};
}
}