当前位置: 首页 > news >正文

el-form v-for循环列表的表单如何校验

1、普通的表单校验直接在最外层<el-form> :model="数据" :rules="规则" ,再在<el-form-item>层设置prop值与model里数据定义的key保持一致即可。

<el-form-item label="名称" prop="ruleName" :rules="[{required: true,message:'请输入名称',trigger: 'blur'}]"><el-input v-model="formData.ruleName" style="width:160px"></el-input>
</el-form-item>

2、很多时候表单不是写死的,而是动态生成的(v-for循环)。

注意:

1、循环体绑定的 list 必须是 form 里面的对象。

2、prop 绑定动态的属性, rules 对动态属性校验。

3、prop 绑定的属性名和 rules 绑定的校验名必须保持一致。

(1)一层循环嵌套

<el-row v-for="(item, i) in formData.overriders" :key="i"><el-form-item label="覆盖类型" :prop="`overriders.${i}.operType`" :rules="[{required: true,message:'请选择覆盖类型',trigger: 'change'}]"><el-select v-model="item.operType" placeholder="覆盖类型" style="width:120px"><el-option v-for="(item, index) in overrideDict" :key="index" :label="item.key" :value="item.value" v-show="!item.selected"></el-option></el-select></el-form-item><el-form-item label="操作类型" :prop="`overriders.${i}.operParam[0].operator`" :rules="[{required: true,message:'请选择操作类型',trigger: 'change'}]"><el-select v-model="item.operParam[0].operator" placeholder="操作类型" style="width:120px"><el-option v-for="(value, key, index) in operateDict" :key="index" :label="value" :value="key"></el-option></el-select></el-form-item>
</el-row>

一层嵌套时:

prop 属性动态绑定,为model对象下的数据,如formData.overriders为循环数组:

则::model="formData",:prop="overriders.${i}.operType"

(2)双层循环嵌套

<el-row v-for="(policyItem, policyIndex) in formData.overridePolicy" :key="policyIndex"><el-row v-for="(overridersItem, overridersIndex) in policyItem.overriders" :key="overridersIndex"><el-form-item label="覆盖类型" :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operType'" :rules="[{required: true,message:'请选择覆盖类型',trigger: 'change'}]"><el-select v-model="overridersItem.operType" placeholder="覆盖类型"><el-option v-for="(item, index) in policyItem.overrideDict" :key="index" :label="item.key" :value="item.value" v-show="!item.selected"></el-option></el-select></el-form-item><el-form-item label="操作类型" :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operParam[0].operator'" :rules="[{required: true,message:'请选择操作类型',trigger: 'change'}]"><el-select v-model="overridersItem.operParam[0].operator" placeholder="操作类型"><el-option v-for="(value, key, index) in operateDict" :key="index" :label="value" :value="key"></el-option></el-select></el-form-item></el-row>
</el-row>

双层嵌套时:

prop 属性动态绑定 :prop="'overridePolicy.' + policyIndex + '.overriders.' + overridersIndex + '.operType'" 

相关文章:

  • Qt/C++音视频开发69-保存监控pcm音频数据到mp4文件/监控录像/录像存储和回放/264/265/aac/pcm等
  • Ubuntu 安装腾讯会议
  • 如何不依赖Unity直接解压unitypackage的内容
  • 深入解析Java内存模型
  • 【DevOps云实践】IaaC:在AWS Application Load Balancer上实现Azure AD的OIDC SSO认证
  • BUGKU-WEB ezbypass
  • <K-近邻算法(KNN)>——《机器学习算法初识》
  • 【dart】常用数据类型
  • 探索HDFS读写流程、节点机制和数据完整性
  • 基于EasyCVR视频技术的流媒体视频融合与汇聚管理系统建设方案
  • 【ARM linux mqtt协议连接服务器】
  • 16 OpenCV Laplance算子
  • 初识Spring MVC
  • 【数据挖掘】练习1:R入门
  • 自然语言处理(NLP)—— 语义关系提取
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 3.7、@ResponseBody 和 @RestController
  • C++入门教程(10):for 语句
  • Centos6.8 使用rpm安装mysql5.7
  • Date型的使用
  • Git学习与使用心得(1)—— 初始化
  • Java超时控制的实现
  • js中forEach回调同异步问题
  • LeetCode29.两数相除 JavaScript
  • Vue.js源码(2):初探List Rendering
  • 记录一下第一次使用npm
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 前端性能优化--懒加载和预加载
  • 前嗅ForeSpider教程:创建模板
  • 三分钟教你同步 Visual Studio Code 设置
  • 树莓派 - 使用须知
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 我看到的前端
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • python最赚钱的4个方向,你最心动的是哪个?
  • # Maven错误Error executing Maven
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (4) PIVOT 和 UPIVOT 的使用
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (C语言)fread与fwrite详解
  • (二)c52学习之旅-简单了解单片机
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (一)RocketMQ初步认识
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • *p++,*(p++),*++p,(*p)++区别?
  • .NET CF命令行调试器MDbg入门(一)
  • .net core 客户端缓存、服务器端响应缓存、服务器内存缓存
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .NET实现之(自动更新)
  • .Net中的集合