Element UI el-form-item 遍历表单校验规则

1.遍历表单校验规则实现案例

prop内容为‘遍历数据.’+index+‘.校验数据’

 <div class="modelBox" v-for="(key, index) in form.list" :key="index">
    <el-form-item label="课时:" :prop="'list.' + index + '.hours'" class="leftNumber" :rules="{
     required: true,
     message: '课时不能为空',
     trigger: 'blur',
	}">
		<el-input-number v-model="item.hours" style="width: 270px; max-width: 100%" :precision="0" controls="false" :min="1" :max="99999" placeholder="请输入课时"></el-input-number>
   </el-form-item>
 </div>

二、嵌套遍历表单校验规则实现案例

prop内容为‘父级遍历数据.’+key+‘.子级遍历数据.’+index+‘.校验数据’

<div v-for="(item,keyI) of form.goodsList" :key="keyI">
	<div class="modelBox" v-for="(key, index) in item.list" :key="index">
		<el-form-item label="课程名称:" :prop="'goodsList.'+keyI+'.list.' + index + '.name'" 
		:rules="{ 
			required: true,
	        message: '课程名称不能为空',
	        trigger: 'blur',
        }">
			<el-input v-model="item.name" placeholder="请输入课程名称" />
		</el-form-item>
	</div>
</div>