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});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/142210.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】顺序查找,折半查找,分块查找的知识点总结及相应的代码实现

目录 1、顺序查找 定义及步骤 代码实现 2、折半查找 定义及步骤 代码实现 折半查找判定树 3、分块查找 定义及步骤 1、顺序查找 定义及步骤 顺序查找的定义&#xff1a;从数据集合的起始位置开始&#xff0c;逐一比较每个数据元素&#xff0c;直到找到所要查找…

windows下实现mysql8的主从复制

1、下载mysql8的安装包 MySQL :: Download MySQL Community Server 2、放到指定目录进行解压&#xff0c;更改名称为mysql-8.1.0-winx64-master,并复制一份作为从数据库 3、在bin目录下创建一个my.ini文件 添加如下内容 [mysqld] basedir"D:/soft/mysql/mysql-8.1.0-win…

【精华】关于生成式AI的思考

文章目录 0 论述1 观点2 模型开发栈3 新兴产品蓝图4 思考番外篇-与AI聊天须知 0 论述 生成式AI的首年——“第一幕”——是从技术出发的。我们发现了一个新的“锤子”——基础模型&#xff0c;并引发了一波轻量级的新技术演示应用。 我们现在认为市场正在进入“第二幕”——这…

TS编译选项——TS文件编译后消除注释

在tsconfig.json文件中配置removeComments属性 {"compilerOptions": {// outDir 用于指定编译后文件所在目录"outDir": "./dist", // 将编译后文件放在dis目录下// 是否文件编译后移除注释"removeComments": true} } 左边是编写的t…

华为云云耀云服务器L实例评测 | 基于minikube搭建单节点kubernetes集群

目录 1 安装Docker2 conntrack-tools3 安装minikube4 下载二进制&#xff1a;kubeadm、kubectl、kubelet5 准备镜像6 启动minikube7 简单测试8 开启dashboard ​ Minikube 是一个使用golang开发的单节点kubernetes集群环境&#xff0c;在资源紧张的情况下&#xff0c;可以用于快…

MySQL - 关于约束类型和作用的介绍

约束的概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 约束的作用&#xff1a;用于保证数据库中数据的正确性、完整性和一致性。 约束分类&#xff1a; 约束类型作用关键字非空约束限制该字段的数据不能为nullnot null唯一约束保证该…

什么是Peppol ID?如何创建?

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

AI聊天ChatGPT系统源码卡密验证开源版

ChatGPT卡密验证版源码是一个基于PHP7.4和MySQL5.6的聊天AI源码&#xff0c;它不仅支持暗黑模式、反应速度极快&#xff0c;而且充值方面采用后台生成卡密方式&#xff0c;方便快捷&#xff0c;如果您有能力将其接入在线支付&#xff0c;即可进一步拓展充值方式&#xff0c;为更…

云原生容器平台——新华资产数字化转型加速器

新华资产管理股份有限公司&#xff08;以下简称“新华资产”&#xff09;于2006年5月经中国保险监督管理委员会批准、7月3日正式挂牌成立&#xff0c;是国内首批专业保险资产管理机构。2020年上半年&#xff0c;公司管理的资产规模突破万亿元人民币&#xff0c;投资收益水平居行…

Python 用列表实现模拟手机通讯录(简易版)

"""列表实现好友管理系统知识点&#xff1a;1、列表存储信息2、列表增删改查3、嵌套循环4、字符串分割和拼接&#xff08;重点&#xff09;5、列表索引"""# 暂存好友信息&#xff08;程序结束数据删除&#xff09; friend_info list()input_buf…

飞书与企业微信的异同

云文档 飞书的云文档会自动用游览器打开&#xff0c;不会直接在PC应用中打开&#xff08;移动端能在应用中打开&#xff09;。 飞书云文档能够插入视频、流程图、问卷等等 聊天消息交互 钉钉也有类似的功能&#xff0c;可以针对消息进行点赞等回复 钉钉的消息回复还有【收到…

Room Arranger for Mac: 轻松创造梦想家园的必备设计软件

你是否曾经梦想过自己动手设计理想中的家居环境&#xff1f;你是否希望通过一个简单易用的工具来实现你的设计理念&#xff1f;那么&#xff0c;Room Arranger for Mac就是你的最佳选择&#xff01; Room Arranger是一款专门为Mac用户打造的室内设计软件&#xff0c;它拥有直观…

适用于初学者,毕业设计的5个c语言项目,代码已开源

C语言项目集 项目介绍 该项目适用于初学者学习c语言&#xff0c;也适用于高校学生课程设计&#xff0c;毕业设计参考。 项目并不能满足所有人的需求&#xff0c;可进行项目指导&#xff0c;定制开发。 开源地址 c语言项目代码地址 项目列表 该项目包含如下5个管理系统&am…

Linux 入门:基本指令

本篇文章来介绍我们在初学Linux时可以会碰倒的一些基本指令&#xff0c;让我们对这些指令有一个基本的了解。 目录 01. ls 指令 02. pwd 命令 03. cd 指令 04. touch 指令 05. mkdir 指令&#xff08;重要&#xff09; 06. rmdir指令 && rm 指令&#xff08;重…

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…

轻松搭建Linux的环境

Linux的环境的搭建 目录&#xff1a;一、使用云服务器二、使用虚拟机软件2.1 下载虚拟机软件2.2 下载一个操作系统的镜像文件 三、直接安装在物理机上四、使用XShell远程登录到Linux 目录&#xff1a; 我们平常用的都是windows系统&#xff0c;对Linux系统还是很陌生得。为什么…

当遇到第一个不满足条件的元素后返回这个元素及之后的各元素itertools.dropwhile()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 当遇到第一个不满足条件的元素后 返回这个元素及之后的各元素 itertools.dropwhile() 选择题 以下程序的运行结果是? import itertools a[1,3,5,2,4,6] print("【显示】a ",a) prin…

百度实习一面(知识图谱部门)

百度面经&#xff08;知识图谱部&#xff09;一面 1.自我介绍 介绍完了&#xff0c;打开共享&#xff0c;对着简历一点一点问 2.ffmpeg在项目中是怎么使用的 回答了ffmpeg在项目中使用的命令&#xff0c;用来干了什么 3.为什么使用toml配置&#xff0c;了解过yml配置吗&am…

【大数据开发技术】实验05-HDFS目录与文件的创建删除与查询操作

文章目录 一、实验目标二、实验要求三、实验内容四、实验步骤 一、实验目标 熟练掌握hadoop操作指令及HDFS命令行接口掌握HDFS目录与文件的创建方法和文件写入到HDFS文件的方法掌握HDFS目录与文件的删除方法掌握查询文件状态信息和目录下所有文件的元数据信息的方法 二、实验…

全栈工程师必须要掌握的前端JavaScript技能

作为一名全栈工程师&#xff0c;在日常的工作中&#xff0c;可能更侧重于后端开发&#xff0c;如&#xff1a;C#&#xff0c;Java&#xff0c;SQL &#xff0c;Python等&#xff0c;对前端的知识则不太精通。在一些比较完善的公司或者项目中&#xff0c;一般会搭配前端工程师&a…