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

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表单进行表单校验

在做项目时&#xff0c;需要根据需要动态添加或新增表单&#xff0c;同时还需要对表单做校验。详情如下图&#xff1a; 刚开始做表单验证的时候&#xff0c;对于这个动态的表单验证有点难搞&#xff0c;试了好几种方法都没有搞定。最后按照下面这种方法实现了&#xff0c;以此…...

sns.load_dataset(“iris“)报错原因探究+解决办法

问题描述 import seaborn as sns # 读取数据 iris sns.load_dataset("iris")在代码中使用了seaborn &#xff0c;并加载iris数据&#xff0c;结果产生了报错信息如下所示 问题分析 原因很简单&#xff0c;我们使用了sns.load_dataset("iris")来加载数据…...

python回文素数

这能有1和本身整除的整数叫素数&#xff1b;如一个素数从左向右和从右向左是相同的数&#xff0c;则该素数为回文素数。编程求出2-1000内的所有回文素数。 源代码&#xff1a; def sushu(n): for i in range(2,n//21): if n%i 0: return False r…...

纽扣电池16CRF1700.15,16CFR1700.20,ANSI C18.3M如何申请?

随着科技的发展&#xff0c;纽扣电池被广泛应用于小型电子产品&#xff0c;如计算器、电子手表、玩具、医疗设备等。由于其体积小&#xff0c;易于拆卸&#xff0c;也造成了儿童误吞的潜在风险。因此&#xff0c;对于纽扣电池的认证和包装&#xff0c;各国均有相应的规定。 在美…...

10.12广州见 | 第十六届智慧城市大会报名通道全面开启

第十六届中国智慧城市大会 将于10月12日至13日 在广州举办 智慧城市是数字中国、智慧社会的核心载体&#xff0c;是数字时代城市发展的高级形态。由中国服务贸易协会、中国测绘学会、中国遥感委员会主办的第十六届中国智慧城市大会&#xff0c;将以“数实融合开放创新智引未…...

2023-油猴(Tampermonkey)脚本推荐

2023-油猴&#xff08;Tampermonkey&#xff09;脚本推荐 知乎增强 链接 https://github.com/XIU2/UserScript https://greasyfork.org/zh-CN/scripts/419081 介绍 移除登录弹窗、屏蔽首页视频、默认收起回答、快捷收起回答/评论&#xff08;左键两侧&#xff09;、快捷回…...

某度sign参数逆向

文章目录 前文分析完整代码结尾 前文 本文章中所有内容仅供学习交流&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 分析 经过我们几次抓包&#xff0c;测试&#xf…...

【选型】JAVA生成PPT及选型

可以使用的框架&#xff08;类库&#xff09;&#xff1a;POI&#xff0c;OpenOffice/LibreOffice&#xff0c;Aspose.Slides&#xff0c;Java开源报表工具&#xff08;JasperReports,BIRT等&#xff09;。 具体如下: 方案优点缺点Apache POI- 开源免费- 可完全控制PPT生成- …...

LPA*算法图文详解

之前我们看过了A* 算法&#xff0c;知道了A* 算法的基本原理&#xff0c;但是A* 算法的缺陷也很明显&#xff1a;它是离线的路径规划算法&#xff0c;只能一次规划出路径&#xff0c;但是后面路径被改变的话就无法生效了。针对这个问题&#xff0c;人们研究出了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盘格式化了怎么恢复数据

当电脑出现问题时&#xff0c;往往会出现一些提示&#xff0c;例如提示格式化的问题&#xff0c;而最近有位小伙伴也遇到了相似的问题&#xff0c;即D盘一打开就显示格式化&#xff0c;由于不清楚D盘格式化会有什么影响&#xff0c;因此不小心进行了格式化操作&#xff0c;结果…...

【Spring】多环境切换

&#x1f388;博客主页&#xff1a;&#x1f308;我的主页&#x1f308; &#x1f388;欢迎点赞 &#x1f44d; 收藏 &#x1f31f;留言 &#x1f4dd; 欢迎讨论&#xff01;&#x1f44f; &#x1f388;本文由 【泠青沼~】 原创&#xff0c;首发于 CSDN&#x1f6a9;&#x1f…...

python经典百题之求10000之内的素数

题目&#xff1a;求10000之内的素数 程序分析 求10000之内的素数是一个常见的问题。素数是大于1且只能被1和自身整除的整数。我们可以使用循环遍历10000以内的每个数&#xff0c;判断其是否是素数。 方法1: 简单遍历法 遍历2到10000之间的每个数&#xff0c;判断其是否为素…...

ROS2 从头开始:第 5 部分 - 并发、执行器和回调组

一、说明 让我们回到基础。并发意味着系统或软件可以同时运行许多任务。例如,在单核 CPU 机器上,可以通过使用线程来实现并发。本文探讨了...

笔试强训Day3

学了一坤时Linux&#xff0c;赶紧来俩道题目放松放松。 T1&#xff1a;在字符串中找出连续最长的数字串 链接&#xff1a;在字符串中找出连续最长的数字串__牛客网 输入一个字符串&#xff0c;返回其最长的数字子串&#xff0c;以及其长度。若有多个最长的数字子串&#xff0c…...

软考软件设计师-存储管理-文件管理-计算机网络(中

文章目录 一、存储管理页面置换算法 (最佳OPT)存储页面-先进先出置换算法&#xff08;FIFO)最久未使用算法(最近最久未使用LRU&#xff09; 二、文件管理初识文件管理文件目录-绝对路径文件管理-文件的结构文件管理-索引的分配 空闲存储空间的管理(位示图法&#xff09;三、计算…...

Vue3的学习

create-vue创建vue3项目 create-vue是官方新的脚手架工具&#xff0c;底层切换到了vite&#xff08;下一代构建工具&#xff09;&#xff0c;为开发提供急速响应 前提环境条件&#xff1a;控制面板输入node -v&#xff0c;显示的是安装了16.0或更高版本的Node.js创建一个Vue应…...

什么是Peppol ID?如何创建?

Peppol 网络的两大优势是安全和高效&#xff0c;由于Peppol 最常用于电子发票&#xff0c;因此这些优势在电子发票上展露无遗。相比之下&#xff0c;通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高&#xff0c;而且容易出现发票欺诈。 如果您所在的公共部门组织或…...

Spring注解大揭秘:@Component、@Service、@Repository详解

Spring注解大揭秘&#xff1a;Component、Service、Repository详解 前言比较 前言 想象一下&#xff0c;你正在构建一个复杂的Spring应用程序。你需要管理各种不同类型的组件&#xff0c;包括服务层、数据访问层和通用组件。Spring的Component、Service和Repository注解就像是你…...

Innodb底层原理与Mysql日志机制

MySQL内部组件结构 Server层 主要包括连接器、词法分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&#xff0c;所有跨存储引擎的功能都在这一层实现&#xff0c…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

轻量安全的密码管理工具Vaultwarden

一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版&#xff0c;由国外开发者在Bitwarden的基础上&#xff0c;采用Rust语言重写而成。 &#xff08;一&#xff09;Vaultwarden镜像的作用及特点 轻量级与高性…...

XXE漏洞知识

目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害 案例&#xff1a;文件读取&#xff08;需要Apache >5.4版本&#xff09; 案例&#xff1a;内网探测&#xff08;鸡肋&#xff09; 案例&#xff1a;执行命…...

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南 在金融行业安全审计中&#xff0c;未启用HTTPS的Web应用被列为高危漏洞。通过正确配置HTTPS&#xff0c;可将中间人攻击风险降低98%——本文将全面解析Spring Boot中HTTPS的实现方案与实战避坑指南。 一、HTTPS 核心原理与…...

开源项目实战学习之YOLO11:12.6 ultralytics-models-tiny_encoder.py

👉 欢迎关注,了解更多精彩内容 👉 欢迎关注,了解更多精彩内容 👉 欢迎关注,了解更多精彩内容 ultralytics-models-sam 1.sam-modules-tiny_encoder.py2.数据处理流程3.代码架构图(类层次与依赖)blocks.py: 定义模型中的各种模块结构 ,如卷积块、残差块等基础构建…...

论文笔记:Large Language Models for Next Point-of-Interest Recommendation

SIGIR 2024 1 intro 传统的基于数值的POI推荐方法在处理上下文信息时存在两个主要限制 需要将异构的LBSN数据转换为数字&#xff0c;这可能导致上下文信息的固有含义丢失仅依赖于统计和人为设计来理解上下文信息&#xff0c;缺乏对上下文信息提供的语义概念的理解 ——>使用…...