Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验
在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:
刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

<row v-for="(item,index) in dataList"><i-Form :model="item" :ref="'dataList'+index" :label-width="language=='en'?140:120"><i-col span="10" ><Form-Item label="<@s.message code ="KSGL.LABLE.KAOSHIRQI"/>" :rules="[{required: true, message: '必填'}]"A prop="ksrqs"><date-picker :value="item.ksrqs" @on-change="item.ksrqs=$event" format="yyyy-MM-dd" type="date" placeholder="" style="width: 200px"></date-picker></Form-Item></i-col><i-col span="10" ><Form-Item label="备注1" prop="bz"><i-Input type="text" v-model="item.bz"></i-Input></Form-Item></i-col><i-col span="4" ><i-Button size="small" type="error" @click="handleRemove(index)"><@s.message code ='ACTION.REMOVE'/></i-Button></i-col></i-Form></row>

let arr = [];for (var i=0;i<self.dataList.length;i++){let form = 'dataList' + i;self.$refs[form][0].validate((valid) => {if (valid) {arr.push(true);} else {arr.push(false);}});}let flag = arr.every((item) => {console.log('item',item)return item === true;});if (flag) {self.$Modal.confirm({title: i18n('MODEL.CONFIRM_TITLE'),content: i18n('MODEL.CONFIRM_CONTENT'),//loading: true,okText: i18n('MODEL.CONFIRM_OK_TEXT'),cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),onOk: function() {},onCancel: function() {self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});}});} else {self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});}
相关文章:
Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验
在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图: 刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此…...
sns.load_dataset(“iris“)报错原因探究+解决办法
问题描述 import seaborn as sns # 读取数据 iris sns.load_dataset("iris")在代码中使用了seaborn ,并加载iris数据,结果产生了报错信息如下所示 问题分析 原因很简单,我们使用了sns.load_dataset("iris")来加载数据…...
python回文素数
这能有1和本身整除的整数叫素数;如一个素数从左向右和从右向左是相同的数,则该素数为回文素数。编程求出2-1000内的所有回文素数。 源代码: def sushu(n): for i in range(2,n//21): if n%i 0: return False r…...
纽扣电池16CRF1700.15,16CFR1700.20,ANSI C18.3M如何申请?
随着科技的发展,纽扣电池被广泛应用于小型电子产品,如计算器、电子手表、玩具、医疗设备等。由于其体积小,易于拆卸,也造成了儿童误吞的潜在风险。因此,对于纽扣电池的认证和包装,各国均有相应的规定。 在美…...
10.12广州见 | 第十六届智慧城市大会报名通道全面开启
第十六届中国智慧城市大会 将于10月12日至13日 在广州举办 智慧城市是数字中国、智慧社会的核心载体,是数字时代城市发展的高级形态。由中国服务贸易协会、中国测绘学会、中国遥感委员会主办的第十六届中国智慧城市大会,将以“数实融合开放创新智引未…...
2023-油猴(Tampermonkey)脚本推荐
2023-油猴(Tampermonkey)脚本推荐 知乎增强 链接 https://github.com/XIU2/UserScript https://greasyfork.org/zh-CN/scripts/419081 介绍 移除登录弹窗、屏蔽首页视频、默认收起回答、快捷收起回答/评论(左键两侧)、快捷回…...
某度sign参数逆向
文章目录 前文分析完整代码结尾 前文 本文章中所有内容仅供学习交流,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 分析 经过我们几次抓包,测试…...
【选型】JAVA生成PPT及选型
可以使用的框架(类库):POI,OpenOffice/LibreOffice,Aspose.Slides,Java开源报表工具(JasperReports,BIRT等)。 具体如下: 方案优点缺点Apache POI- 开源免费- 可完全控制PPT生成- …...
LPA*算法图文详解
之前我们看过了A* 算法,知道了A* 算法的基本原理,但是A* 算法的缺陷也很明显:它是离线的路径规划算法,只能一次规划出路径,但是后面路径被改变的话就无法生效了。针对这个问题,人们研究出了D* 算法。D* 算法…...
【Unity的HDRP渲染管线下实现好用的GUI模糊和外描边流光效果_Blur_OutLine_案例分享(内附源码)】
实现好用的模糊效果_Blur HDRP渲染管线下搭建场景创建RenderTextureRenderTexture 与相机的配置:UI层 Canvas的不同Render Mode:Canvas 在Screen Space - Overlay 模式下:UI旋转Y轴,没有透视。切换到Screen Space - Camera 模式下:UI层跑到物体后面去了,将Plane Distance…...
电脑D盘格式化会有什么影响?电脑D盘格式化了怎么恢复数据
当电脑出现问题时,往往会出现一些提示,例如提示格式化的问题,而最近有位小伙伴也遇到了相似的问题,即D盘一打开就显示格式化,由于不清楚D盘格式化会有什么影响,因此不小心进行了格式化操作,结果…...
【Spring】多环境切换
🎈博客主页:🌈我的主页🌈 🎈欢迎点赞 👍 收藏 🌟留言 📝 欢迎讨论!👏 🎈本文由 【泠青沼~】 原创,首发于 CSDN🚩…...
python经典百题之求10000之内的素数
题目:求10000之内的素数 程序分析 求10000之内的素数是一个常见的问题。素数是大于1且只能被1和自身整除的整数。我们可以使用循环遍历10000以内的每个数,判断其是否是素数。 方法1: 简单遍历法 遍历2到10000之间的每个数,判断其是否为素…...
ROS2 从头开始:第 5 部分 - 并发、执行器和回调组
一、说明 让我们回到基础。并发意味着系统或软件可以同时运行许多任务。例如,在单核 CPU 机器上,可以通过使用线程来实现并发。本文探讨了...
笔试强训Day3
学了一坤时Linux,赶紧来俩道题目放松放松。 T1:在字符串中找出连续最长的数字串 链接:在字符串中找出连续最长的数字串__牛客网 输入一个字符串,返回其最长的数字子串,以及其长度。若有多个最长的数字子串,…...
软考软件设计师-存储管理-文件管理-计算机网络(中
文章目录 一、存储管理页面置换算法 (最佳OPT)存储页面-先进先出置换算法(FIFO)最久未使用算法(最近最久未使用LRU) 二、文件管理初识文件管理文件目录-绝对路径文件管理-文件的结构文件管理-索引的分配 空闲存储空间的管理(位示图法)三、计算…...
Vue3的学习
create-vue创建vue3项目 create-vue是官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应 前提环境条件:控制面板输入node -v,显示的是安装了16.0或更高版本的Node.js创建一个Vue应…...
什么是Peppol ID?如何创建?
Peppol 网络的两大优势是安全和高效,由于Peppol 最常用于电子发票,因此这些优势在电子发票上展露无遗。相比之下,通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高,而且容易出现发票欺诈。 如果您所在的公共部门组织或…...
Spring注解大揭秘:@Component、@Service、@Repository详解
Spring注解大揭秘:Component、Service、Repository详解 前言比较 前言 想象一下,你正在构建一个复杂的Spring应用程序。你需要管理各种不同类型的组件,包括服务层、数据访问层和通用组件。Spring的Component、Service和Repository注解就像是你…...
Innodb底层原理与Mysql日志机制
MySQL内部组件结构 Server层 主要包括连接器、词法分析器、优化器、执行器等,涵盖 MySQL 的大多数核心服务功能,以及所有的内置函数(如日期、时间、数学和加密函数等),所有跨存储引擎的功能都在这一层实现,…...
intv_ai_mk11 GPU算力优化部署:7B模型在CSDN GPU实例上的高效运行方案
intv_ai_mk11 GPU算力优化部署:7B模型在CSDN GPU实例上的高效运行方案 1. 项目背景与价值 intv_ai_mk11是基于Llama架构的7B参数AI对话模型,专为中文场景优化设计。在CSDN GPU实例上部署这类中型模型时,面临的主要挑战是如何在有限显存条件…...
S2-Pro+C语言教学系统:代码逻辑讲解与典型错误自动纠正
S2-ProC语言教学系统:代码逻辑讲解与典型错误自动纠正 1. 智能编程助教初体验 第一次看到S2-Pro在C语言教学中的应用效果时,确实让人眼前一亮。想象一下,当学生提交一段指针运算代码后,系统不仅能指出错误,还能像经验…...
Ubuntu22.04微信依赖冲突的终极解决方案
1. 问题现象与原因分析 最近在Ubuntu 22.04上安装微信时,很多朋友都遇到了依赖冲突的问题。具体表现是当你尝试通过命令行安装微信时,系统会提示类似这样的错误信息: 下列软件包有未满足的依赖关系: libldap-2.4-2 : 依赖: libsas…...
7步掌握MetaGPT:从单行需求到完整软件的多智能体革命
7步掌握MetaGPT:从单行需求到完整软件的多智能体革命 【免费下载链接】MetaGPT 🌟 The Multi-Agent Framework: First AI Software Company, Towards Natural Language Programming 项目地址: https://gitcode.com/GitHub_Trending/me/MetaGPT 想…...
7大维度测评:2023年开源付费墙绕过工具终极选择指南
7大维度测评:2023年开源付费墙绕过工具终极选择指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字内容访问需求日益增长的今天,选择一款高效可靠的开源…...
新手避坑指南:用Altium Designer打开嘉立创PCB文件,这3个设置不改布线全乱
Altium Designer导入嘉立创PCB文件的三大核心设置解析 刚接触硬件设计的新手工程师们,当你们第一次尝试用Altium Designer打开从嘉立创EDA导出的PCB文件时,是否遇到过这样的场景:板框莫名其妙错位、网络连接全部丢失、设计规则一片混乱&#…...
从豆瓣到StyleTalk:手把手教你用真实场景数据微调你的中文对话模型
从豆瓣到StyleTalk:手把手教你用真实场景数据微调你的中文对话模型 当你已经掌握了基座模型微调的基础技能,如何让模型真正理解特定领域的专业术语,或是模仿某种独特的说话风格?本文将带你深入实战,从数据清洗到效果评…...
如何用Python免费下载B站4K大会员视频:bilibili-downloader完整指南
如何用Python免费下载B站4K大会员视频:bilibili-downloader完整指南 【免费下载链接】bilibili-downloader B站视频下载,支持下载大会员清晰度4K,持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 还在为…...
FPGA新手避坑指南:用Xilinx MIG IP核驱动DDR3内存的完整配置流程(以MT41J256M16为例)
FPGA新手避坑指南:Xilinx MIG IP核驱动DDR3内存的完整配置流程(以MT41J256M16为例) 第一次接触FPGA与DDR3接口设计时,面对密密麻麻的芯片手册和复杂的IP核配置界面,很多工程师都会感到无从下手。本文将手把手带你完成从…...
Virtualbox “Kernel driver not installed (rc=-1908)”问题全面解析与修复指南
1. 遇到Virtualbox "Kernel driver not installed (rc-1908)"错误怎么办? 最近在Ubuntu系统上更新后,突然发现Virtualbox无法正常启动虚拟机了,屏幕上赫然显示着"Kernel driver not installed (rc-1908)"的错误提示。作为…...
