VUE中el-form循环绑定

在我们开发过程中，有时会遇到el-form循环绑定校验，并且后台返回的是动态表单list的形式,并且动态绑定是否必填

<el-form
	ref="addForm"
	:model="submitForm"   //绑定的表单对象
	label-width="125px"
    :rules="rules"		  //绑定的校验规则

>
	<el-form-item v-for="(item,index) in formArr" :key="index" :label="item.fieldName + ' : ' " :required="item.isRequired==1?true:false" :prop="item.fieldIdentify">
		<el-input v-if="item.fieldIdentify=='AAA'" style="width:100%;color:#DBDBDD;" type="text" v-model="submitForm.AAA"></el-input>
		<el-input v-if="item.fieldIdentify=='BBB'" style="width:100%;color:#DBDBDD;" type="text" v-model="submitForm.BBB"></el-input>
		<el-input v-if="item.fieldIdentify=='CCC'" style="width:100%;color:#DBDBDD;" type="text" v-model="submitForm.CCC"></el-input>
		<el-form-item  class="textarea form_textarea" v-if="item.fieldIdentify=='DDD'" :prop="item.fieldIdentify">
			<el-input style="width:650px;" type="textarea" v-model="submitForm.DDD"></el-input>
        </el-form-item>
	</el-form-item>

</el-form>
<script>
	export default {
		data(){
			return{
				submitForm:{
					AAA:'',
					BBB:'',
					CCC:'',
					DDD:''
				},
				//formArr数据类似
				formArr:[
					{
						fieldIdentify: "xxx",
						fieldName: "xxx",
						fieldValue: "xxx",
						isRequired: 1
					},
					{
						fieldIdentify: "xxx",
						fieldName: "xxx",
						fieldValue: "xxx",
						isRequired: 1
					},
					{
						fieldIdentify: "xxx",
						fieldName: "xxx",
						fieldValue: "xxx",
						isRequired: 1
					}
				],
				//注意在el-form-item的:prop值要和rules里面的值相同
				rules:{
					AAA:[{
						required: true, message: "AAA不能为空", trigger: ["blur","change"]
					}],
					BBB:[{
						required: true, message: "BBB不能为空", trigger: ["blur","change"]
					}],
					CCC:[{
						required: true, message: "CCC不能为空", trigger: ["blur","change"]
					}],
					DDD:[{
						required: true, message: "CCC不能为空", trigger: ["blur","change"]
					}]
				}
			}
		}
	}
</script>