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

Element通过v-for循环渲染的form表单校验

需求:有个表单信息是v-for渲染的,例如下图,通过循环遍历实现新增和删除模块,按照平时的写法实现校验,是不能实现我们想要的效果,根据这个需求,我找到了一个解决方法

 

1.HTML 

  <el-form ref="form" :model="form" :rules="rules" label-width="110px" ><div v-for="(item,index) in this.form.trucksList"><div class="num">{{index+1}}.</div><div class="flex"><div class="info"><el-form-item label="服务商"   :prop="'trucksList.' + index+'.providerType'" :rules="rules.providerType"><el-select v-model="item.providerType" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.label"></el-option></el-select></el-form-item><el-form-item label="卡车公司"  :prop="'trucksList.' + index+'.truckCompany'" :rules="rules.truckCompany"><el-inputv-model="item.truckCompany"placeholder="请输入卡车公司"/></el-form-item><el-form-item label="预估运输时间" :prop="'trucksList.' + index+'.transportDay'" :rules="rules.transportDay"><el-inputv-model="item.transportDay "placeholder="请输入预估运输时间"/></el-form-item><el-form-item label="总价" :prop="'trucksList.' + index+'.priceTotal'" :rules="rules.priceTotal"><el-inputv-model="item.priceTotal "placeholder="请输入总价"/></el-form-item></div></div></div>
</el-form>

 2.JS

data(){return{// 报价表单参数form: {trucksList:[{providerType:'',//服务商truckCompany:'',//卡车公司transportDay:'',//预估运输时间priceTotal:'',//总价orderNo:" ",//平台订单号}],},// 表单校验rules:{providerType:[{ required: true, message: "请选择服务商", trigger: "blur" }],truckCompany:[{ required: true, message: "请输入卡车公司", trigger: "blur" }],transportDay:[{ required: true, message: "请输入预估运输时间", trigger: "blur" }],priceTotal:[{ required: true, message: "请输入总价", trigger: "blur" }],   },}},

 注:

1.循环的数据中,每个el-form-item都写rules、prop

2.rules为data中rules对象对应属性,如'rules.providerType';

 

3.prop的第一部分为data中该组遍历数据对应的数组名,此例中为form中的'trucksList';第二部分为遍历的key值变量;第三部分为form中的'trucksList'中该输入框对应的属性名;

 只有以上几点写对,就可以实现循环数据的表单校验啦

相关文章:

Element通过v-for循环渲染的form表单校验

需求&#xff1a;有个表单信息是v-for渲染的&#xff0c;例如下图&#xff0c;通过循环遍历实现新增和删除模块&#xff0c;按照平时的写法实现校验&#xff0c;是不能实现我们想要的效果&#xff0c;根据这个需求&#xff0c;我找到了一个解决方法 1.HTML <el-form ref&qu…...

精彩回顾 | 迪捷软件出席2023ATC汽车电子与软件技术周

2023年8月18日&#xff0c;由ATC汽车技术会议主办&#xff0c;上海市集成电路行业协会支持的“2023ATC汽车电子与软件技术周”在上海市圆满落幕。迪捷软件上海参展之行圆满收官。 ▲开幕式 本次峰会汇聚了整车厂、汽车零部件集团、软硬件方案提供商、软件工具供应商、软件测试…...

树莓派的自启动与桌面应用程序

目录 1 打开终端自启动 .bashrc 2 触发时机较早的开机自启动rc.local 3 桌面应用程序 4 触发时机较晚的的开机自启动 autostart 1 打开终端自启动 .bashrc .bashrc的程序也可以在开机时进行自启动&#xff0c;但是每一次打开终端时同样会运行一遍&#xff0c;所以只需…...

RabbitMQ面试题

1. 什么是MQ MQ 就是消息队列。是软件和软件进行通信的中间件产品 2. MQ的优点 异步处理 - 相比于传统的串行、并行方式&#xff0c;提高了系统吞吐量。 应用解耦 - 系统间通过消息通信&#xff0c;不用关心其他系统的处理。 流量削锋 - 可以通过消息队列长度控制请求量…...

Kubernetes二进制部署方案

目录 一、环境准备 2.1、主机配置 2.2、安装 Docker 2.3、生成通信加密证书 2.3.1、生成 CA 证书&#xff08;所有主机操作&#xff09; 2.3.2、生成 Server 证书&#xff08;所有主机&#xff09; 2.3.3、生成 admin 证书(所有主机) 2.3.4、生成 proxy 证书 三、部署 …...

Android 13 开启关闭飞行模式

一.背景 由于客户定制的Settings里面需要开启和关闭飞行模式,所以需要实现此功能。 二.前提条件 首先应用肯定要是系统应用,并且导入framework.jar包,具体可以参考: Android 应用自动开启辅助(无障碍)功能并使用辅助(无障碍)功能_android 自动开启无障碍服务_龚礼鹏的博客…...

C++学习笔记总结练习:EffectiveSTL

文章目录 使用STL库的55条建议1.慎重选择容器的类型2.不要试图编写独立于容器的代码3.确定容器中的对象拷贝正确且高效4.调用empty判断是否为空&#xff0c;而不是size5.区间成员函数优于与之对应单元素成员函数6.如果容器中包含了通过new操作创建的指针&#xff0c;切记在容器…...

SQL Developer中的Data Redaction

SQL Developer中的Data Redaction用起来比命令行方便多了。可以选定表或视图&#xff0c;右键点击“遮盖保护”菜单。 但赋权方面有需要注意的地方。 假设Redact Admin是SYS&#xff0c;Redact User是HR。虽然SYS具备所有权限&#xff0c;但还是报以下错误。其实这个错误是针…...

深入解析Ed25519椭圆曲线数字签名算法的C#移植及应用示例

第一部分&#xff1a;Ed25519算法的简介与重要性 随着数字加密技术的飞速发展&#xff0c;我们不断地探索更安全、更高效的加密算法来保护数据和身份验证。其中&#xff0c;Ed25519已经成为了椭圆曲线数字签名算法&#xff08;ECDSA&#xff09;的一个重要分支&#xff0c;其在…...

XQuery创建BaseX数据库实例

XQuery创建BaseX数据库实例 文章目录 XQuery创建BaseX数据库实例1、准备工作2、demo目录结构3、IDEA配置BaseX4、工具类BaseXClient5、Example 1、准备工作 开发工具&#xff1a; IDEAOxygen 技术&#xff1a; JavaBaseXXpathXquery BaseX需要阅读的文档&#xff1a; htt…...

MySQL索引(Index)

Index 数据库中的索引&#xff08;Index&#xff09;是一种数据结构&#xff0c;用于提高数据库查询性能和加速数据检索过程。索引可以看作是数据库表中某个或多个列的数据结构&#xff0c;类似于书中的目录&#xff0c;可以帮助数据库管理系统更快地定位和访问数据。它们是数…...

web框架面试题

1、Django 的生命周期&#xff1f; 前端发起请求nginxuwsgi中间件URLview视图通过orm与model层进行数据交互拿到数据返回给view试图将数据渲染到模板中拿到字符串中间件uwsginginx前端渲染 2、中间件的五种方法&#xff1f; process_requestprocess_responseProcess_viewPro…...

什么是字体堆栈(font stack)?如何设置字体堆栈?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是字体堆栈&#xff08;Font Stack&#xff09;&#xff1f;⭐ 如何设置字体堆栈&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 …...

推特群推王:引爆您的产品

作为出海市场的营销平台&#xff0c;Twitter的流量不断攀升&#xff0c;已然成为跨境贸易企业的一部分。当前&#xff0c;Twitter已不再是一个简单的社交平台&#xff0c;而是一个强大的营销平台&#xff0c;使企业能够与受众实时互动。然而&#xff0c;与其他社交媒体一样&…...

[JavaWeb]【七】web后端开发-MYSQL

前言&#xff1a;MySQL是一种流行的关系型数据库管理系统,它的作用是存储和管理数据。在Web开发中,MySQL是必备的数据库技能之一,因为它可以帮助Web开发人员处理大量的数据,并且提供了强大的数据查询和管理功能。 一 数据库介绍 1.1 什么是数据库 1.2 数据库产品 二 MySQL概述…...

C语言:初阶测试错题(查漏补缺)

题一&#xff1a;字符串倒置 示例1 输入 I like beijing. 输出 beijing. like I 思路一&#xff1a; 定义字符串数组arr[ ] ,利用gets()将要倒置的字符串输入&#xff0c;记录字符串长度len&#xff0c;此时写一个逆置函数Inversion()&#xff0c;第一步将整个字符串逆置&…...

数组累加器-reduce、reduceRight

数组累加器-reduce 一、基本语法1.reduce2.reduceRight 二、具体使用1.reduce2.reduceRight 三、使用场景1.数组求和2.数组求积3.计算数组中每个元素出现的次数 一、基本语法 1.reduce reduce() &#xff1a;对数组中的每个元素按序执行一个提供的 reducer 函数&#xff0c;每…...

uniapp 官方扩展组件 uni-combox 实现:只能选择不能手写(输入中支持过滤显示下拉列表)

uniapp 官方扩展组件 uni-combox 实现&#xff1a;只能选择不能手写&#xff08;输入中支持过滤显示下拉列表&#xff09; uni-comboxuni-combox 原本支持&#xff1a;问题&#xff1a; 改造源码参考资料 uni-combox uni-combox 原本支持&#xff1a; 下拉选择。输入关键字&am…...

TypeScript 语法

环境搭建 以javascript为基础构建的语言&#xff0c;一个js的超集&#xff0c;可以在任何支持js的平台中执行&#xff0c;ts扩展了js并且添加了类型&#xff0c;但是ts不能被js解析器直接执行&#xff0c;需要编译器编译为js文件&#xff0c;然后引入到 html 页面使用。 ts增…...

已经开源的中文大模型对比,支持更新

大模型下载&#xff1a;互链高科 ClueAI/PromptCLUE-base-v1-5 at main (huggingface.co) 支持多任务生成&#xff0c;支持中文&#xff0c;不支持多轮对话&#xff0c;体验&#xff1a;ClueAI (cluebenchmarks.com) 基于promptclue-base进一步训练的模型&#xff1a;ClueAI/Ch…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...