Element通过v-for循环渲染的form表单校验的实现
更新时间：2022年04月24日 15:32:23 作者：无语听梧桐
日常业务开发中，form表单校验是一个很常见的问题，本文主要介绍了Element通过v-for循环渲染的form表单校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
普通的form表单校验
日常业务开发中，对于中后台管理系统，form表单校验是一个很常见的问题。
查阅Element官方文档，我们了解到，form表单校验是这样的，需要给所校验的el-form-item添加prop属性值，这个属性值便就是当前元素v-model 所绑定的值。如图所示：
v-for 循坏的表单校验
那么问题来了，通过v-for 遍历循环渲染的form表单怎么添加校验呢？主要问题就在于其prop了。
再次阅读官方文档，发现这样一个行字，动态增减表单项，诶，动态增减，好像和我的需求差不多呢，也有校验，点开看看。这是链接
如图：v-for 循坏的el-form-item，区分他们的是index，domain是一个数组对象，每个el-form-item 中绑定的值是每一项的value，设置每个prop为图中标识的那样，从而实现校验。
实现的代码
官网中通过字符串拼接的方式添加prop，看着稍稍比较繁琐，可以通过ES6中的模版字符串替换。
效果图：
到此这篇关于Element通过v-for循环渲染的form表单校验的实现的文章就介绍到这了,更多相关Element v-for循环渲染的form表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
不断把公共的、可以独立拆分出来的抽出来作为一个独立可复用的组件来向上提供调用,这样让我们的代码更加方便组织和管理,并且扩展性也更强,下面这篇文章主要给大家介绍了关于vue3组件化开发之可复用性应用的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了Vue引入高德地图实现流程，实现步骤是通过vue的方法引入地图，初始化地图，设置宽和高，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下2019-02-02
vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本篇文章主要介绍了VsCode新建VueJs项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
目前vite主要默认是支持给vue3使用的,并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目,此时对于一些vue2的老项目就显得不友好了,下面这篇文章主要给大家介绍了关于vue2老项目vite升级改造的相关资料,需要的朋友可以参考下2022-12-12
本篇文章主要介绍了VUE饿了么树形控件添加增删改功能的示例代码，非常具有实用价值，有兴趣的可以了解一下2017-10-10
这篇文章主要介绍了vue中mixins的工具的封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论