【vue+elementui】v-for循环生成的表单项、动态生成的表单项的校验

最新推荐文章于 2023-03-17 16:50:31 发布

小花花inhere

最新推荐文章于 2023-03-17 16:50:31 发布

阅读量3.4k

点赞数 2

分类专栏： elementUI vue 文章标签： vue elementui 表单验证 v-for验证动态表单

本文链接：https://blog.youkuaiyun.com/IT429/article/details/112849057

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

elementUI

8 篇文章

订阅专栏

本文探讨了在Vue和ElementUI中，如何使用v-for循环和动态生成的表单项进行有效的表单验证。通过利用:prop属性，解决了prop不确定导致的验证问题，确保了动态表单的正确校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for循环生成的表单项、动态生成的表单项都有个特性，就是prop不确定，没有prop的话我们就无法像普通表单验证那样校验，所以我们要用:prop来校验。

语法：

:prop="`v-for绑定的数组.${v-for的索引}.v-model绑定的变量`"

示例如下：

<el-form :model="organForm" ref="organForm">
	<el-card v-for="(item, idx) in organForm.organList" :key="idx">
		<el-form-item label="名称" :prop="`organList.${idx}.name`">
			<el-input v-model="item.name" />
		</el-form-item>
	</el-card>
</el-form>

export default {
	data () {
		return {
			organForm: {
			  	organList: [{
		          	name:''
	        	}]
	      	}
		}
	}
}