Vue项目中element表单的循环校验

最新推荐文章于 2024-09-02 11:13:44 发布

原创最新推荐文章于 2024-09-02 11:13:44 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Element UI框架中实现表单循环显示及校验的方法，通过设置el-form-item的prop属性来动态绑定验证规则，适用于提交时需要逐项验证的场景。

在工作中碰到了一个需求，就是返回数据在表单里循环显示，在提交的时候就得对表单进行循环校验，但是使用element普通的校验方法是不生效的。需要对el-form-item 设置单独的props和rules。
在这里插入图片描述

props中items是循环的数组，index是循环的index，后边拼接的是需要校验对象的字段名，
rules是校验规则可以再data中设置，校验方式都是一样的，
话不多说直接上代码：

<el-row :gutter="80" v-for="(shop, index) in form.items" :key="index">
	<el-col :span="11">
		<!--props中items是循环的对象 index是循环的index 后边拼接的是需要校验对象的字段名，
		:rules是校验规则可以再data中设置 -->
		<el-form-item 
		label="货物名称" 
		:prop="'items.' + index + '.name'" 
		:rules="itemForm.checkName"
		>
			<el-input v-model="shop.name" autocomplete="off"></el-input>
		</el-form-item>
	</el-col>
	<el-col :span="11">
		<el-form-item
		label="金额"
		:prop="'items.' + index + '.subTotal'"
		:rules="itemForm.checkSubTotal"
		>
			<el-input v-model="shop.subTotal" autocomplete="off"></el-input>
		</el-form-item>
	</el-col>
</el-row>

export default {
	data(){
		return {
			itemForm:{
				checkSubTotal: [
					{
						required: false,
						trigger: "blur",
					},
					{
						pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,//
						message: "金额格式不正确",
						trigger: "blur",
					},
				],
				checkName: [
					{
						required: true,
						message: "请输入货物名称",
						trigger: "blur",
					},
				]
			}
		}
	}
}