vue + element 动态表单（多层级）添加校验

以前遇到过给动态添加的表单项添加校验，但是做过之后就忘记了，时隔一年多，又遇到这样的需求，还是多层级的数据结构，所以决定借这个机会写一篇文章记录一下！！！

废话不多说，直接上代码！

<el-form :model="dataInfo" ref="dataInfo" label-width="40px">
	<div v-for="(item,index) in dataInfo.list">
		<el-form-item 
  			:label="`${index+1}、`" 
    		:prop="'list.' + index + '.objName'"
    		:rules="[{required:true,message:'该项不能为空',trigger:'change'}]">
		    <el-input style="width: 95%;" v-model="item.objName" placeholder="请输入" size="small"></el-input>
		</el-form-item>
		<template>
			<div style="margin-left: 40px;" v-for="(it,indexs) in item.objList">
       			<el-form-item
        			:prop="'list.' + index +'.objList.' + indexs + '.objListName'"
        			:rules="[{required:true,message:'该项不能为空',trigger:'change'}]">
				    <!--label自定义-->
				    <span slot='label'>
			    		<img src="@/assets/images/radio.png" />
			    	</span>
			    	<el-input style="width: 95%;" size="small" v-model="it.objListName"></el-input>
				</el-form-item>
			  </div>
		</template>
	</div>
</el-form>

//数据
data（）{
	return{
		dattInfo：{
			list：[]
		}
	}
}
methods:{
	//提交、校验
	submit（）{
		this.$refs.dattInfo.validate(valid =>{
			if(valid){
				console.log('表单校验通过');
			}else{
				console.log('表单校验不通过');
			}
		})
	}
}

注意：
1.特别注意 prop 和 rules 的绑定， prop 里面的名称必须和输入框绑定的属性名称对应起来。
2. dattInfo 必须是一个对象，循环的是对象里面的 list 数组，往 list 数组里面动态增加数据。
3. 循环体里面再次添加动态的表单时，注意 indexs 和外层 index 的区别。