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

最新推荐文章于 2024-03-11 10:53:41 发布

Genius Joe

最新推荐文章于 2024-03-11 10:53:41 发布

阅读量872

点赞数

分类专栏： vue Element UI 文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/qq_39967527/article/details/126745727

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Element UI

4 篇文章 2 订阅

订阅专栏

一、遍历表单校验规则实现案例

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>