element ui 中循环列表的表单怎么校验（v-for动态绑定的数据)

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