Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

news2024/11/20 8:26:55

在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

			<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.coloradmin.cn/o/1039192.html

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

相关文章

Express 基础操作和详解

Express 基础操作和详解 Express.js 是一个基于 Node.js 平台的 Web 应用程序框架&#xff0c;它旨在帮助开发者轻松构建和管理 Web 服务和应用程序。Express 提供了许多强大的功能&#xff0c;使得创建可扩展、灵活且高性能的 Web 应用变得相对容易。以下是 Express 的主要特点…

Github 开启 2FA-无需下载软件实现

Github 开启 2FA 验证了&#xff0c;如果不配置&#xff0c;后续会限制登录Github, 用代码实现配置 获取密钥 setup key 点击 setup key 链接&#xff0c;获取密钥 引入相关算法的 jar <dependency><groupId>com.amdelamar</groupId><artifactId>jot…

华为存储培训

01 存储前沿技术和发展趋势 狭义的存储定义 CD、DVD、ZIP、磁带、硬盘等 广义的存储定义 存储硬件系统&#xff08;磁盘阵列&#xff0c;控制器&#xff0c;磁盘柜&#xff0c;磁带库等&#xff09; 存储软件&#xff08;备份软件&#xff1b;管理软件&#xff0c;快照&…

Eclipse初步学习使用

1.配置自动填充 window->preference 2.自动判断错误&#xff0c;并给出解决方法 3.创建可执行文件&#xff1a; 新建package&#xff0c; 包内新建 javaclass&#xff0c;选择psvm&#xff0c; 4.编写程序&#xff0c;进行执行 右键&#xff0c;选择 run as applic…

第二证券:持股还是持币?多家券商:四季度行情有望回归

上星期初&#xff0c;海外商场持续调整&#xff0c;中美利差继续探底&#xff0c;一度压制A股体现。然而上星期五方针预期提振、AI权重股开释利好、外资大幅回流&#xff0c;共同引领A股走出一波触底反弹的独立行情。展望本周&#xff0c;A股将迎来中秋国庆长假前的最终一个买卖…

深度强化学习(一)常识性普及

文章目录 机器学习、强化学习、深度学习的侧重点强化学习的简介强化学习的主要特征强化学习和机器学习的关系强化学习的发展历史 深度强化学习 一些参考的资料&#xff1a; 蘑菇书&#xff1a;https://datawhalechina.github.io/easy-rl/#/chapter1/chapter1 源代码&#xff1a…

Pycharm2023版修改镜像源

步骤1 步骤2 国内常见镜像源 阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/豆瓣(douban) http://pypi.douban.com/simple/清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/中国科学技术大学 http://pypi.mirrors.…

微软云服务宕机超24小时 企业关键业务如何避免被“拖累”

提起“宕机”这个词&#xff0c;估计大多数企业管理层&#xff0c;技术人员都不会陌生。8月&#xff0c;微软的公有云服务以及Office365等软件&#xff0c;因为澳大利亚的极端天气&#xff0c;备用方案未能及时响应&#xff0c;导致澳洲用户出现了超过24小时的云服务“暂停”。…

C++ - 双指针_盛水最多的容器 - 快乐数 - 三数之和

盛水最多的容器 11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的…

基于云的虚拟桌面基础架构的优势有哪些?

基于云的虚拟桌面基础架构 &#xff08;VDI&#xff09; OpenText™ Exceed TurboX™ &#xff08;ETX&#xff09; 长期以来一直是虚拟化在 Linux 主机上运行的图形要求苛刻的软件的黄金标准。ETX 最新版本&#xff08;12.5&#xff09;增加了许多Microsoft Windows功能&…

Android Studio 的aapt2.exe在哪个目录下

一般在&#xff1a;C:\Users\admin\AppData\Local\Android\Sdk\build-tools\30.0.2&#xff08;不一定是30.0.2&#xff0c;这个得看你的版本&#xff09; 怎么找&#xff1a; 1.打开Android studio

表格内日期比较计算

需求&#xff1a;在表格中新增数据&#xff0c;计算开始日期中最早的和结束日期中最晚的&#xff0c;回显到下方。 <el-formref"formRef":model"ruleForm":rules"rules"style"margin-top: 20px;"label-position"top">…

rar格式转换zip格式,如何做?

平时大家压缩文件时对压缩包格式可能没有什么要求&#xff0c;但是&#xff0c;可能因为工作需要&#xff0c;我们要将压缩包格式进行转换&#xff0c;那么我们如何将rar格式转换为其他格式呢&#xff1f;方法如下&#xff1a; 工具&#xff1a;WinRAR 打开WinRAR&#xff0c…

GaussDB数据库SQL系列-定义重载函数

目录 一、前言 二、函数重载的定义 三、GaussDB创建自定义重载函数的事项说明 四、GaussDB数据库中的自定义重载函数示例 示例一&#xff1a;创建package属性重载函数&#xff0c;根据不同的SQL条件获取生成视图 示例二&#xff1a;创建package属性重载函数&#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…

【技能树笔记】网络篇——练习题解析(三)

目录 前言 一、网络层的功能 1.1 网络层的功能 1.2 网络层PDU 1.3 网络层功能 二、IP协议的特点 2.1 网络层的功能 2.2 IP协议特点 2.3 IP协议 三、IPv4地址的分类和计算 3.1 IP地址的组成 3.2 IP地址的分类1 3.2 IP地址的分类2 3.3 IP地址的分类3 3.4 IP地址的…

用例图学习

用例图是什么 用例图&#xff08;Use Case Diagram&#xff09;是UML&#xff08;统一建模语言&#xff09;中的一种行为图&#xff0c;用于描述系统的功能和用户&#xff08;或其他外部实体&#xff09;与系统之间的交互。用例图是一种高级图&#xff0c;通常用于捕捉系统的需…

管理多个项目的主要挑战与应对方法

在当今快节奏的商业环境中&#xff0c;企业越来越多地需要同时承担多个项目。有效管理多个项目已成为企业寻求优化资源、提高效率和最大化项目成果的一项关键技能。 同时管理多个项目的挑战 对于管理多个项目的人来说&#xff0c;最大的挑战是由于时间压力而无法匹配“工作质…

02 MIT线性代数-矩阵消元 Elimination with matrices

一, 消元法 Method of Elimination 消元法是计算机软件求解线形方程组所用的最常见的方法。任何情况下&#xff0c;只要是矩阵A可逆&#xff0c;均可以通过消元法求得Axb的解 eg: 我们将矩阵左上角的1称之为“主元一”&#xff08;the first pivot&#xff09;&#xff0c;第…

【Xilinx】基于MPSoC的OpenAMP实现(一)

【Xilinx】基于MPSoC的OpenAMP实现&#xff08;一&#xff09; 一、开发环境1、开发思路2、下载官方bsp包 二、编译Linux1、配置petalinux环境变量2、创建工程3、进入目录4、设置缓存目录&#xff08;重点&#xff1a;可离线编译&#xff0c;加快编译速度&#xff09;5、配置u-…