elementUI 循环出来的表单,怎么做表单校验?

在这里插入图片描述
数据结构如下:
diversionParamList: [
{
length: null,
positionNumber: null,
value: null,
}
]

思路:可根据 index 动态绑定 :props 属性值,校验规则写在:rules

<div class="config-item" v-for="(item, index) in form.diversionParamList" :key="index"><el-form-item :label="`分流配置${index + 1}`" :prop="`diversionParamList.${index}.positionNumber`":rules="{ required: true, message: '请输入位置', trigger: 'blur' }"><span class="config-item-text">位置:</span><el-input-number size="small" style="width: 100px" v-model="item.positionNumber" :min="0"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.length`":rules="{ required: true, message: '请输入长度', trigger: 'blur' }"><span class="config-item-text">长度:</span><el-input-number size="small" style="width: 100px" v-model="item.length" :min="1"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.value`":rules="[{ required: true, message: '请输入值', trigger: 'blur' }, { pattern: /^[0-9A-Fa-f]+$/, message: '必须是1-9或16进制字符:a-f或A-F' }]"><span class="config-item-text">值:</span><el-input :maxlength="item.length * 2" v-model="item.value" placeholder="请输入值" style="width: 150px"><template #prefix>0x&nbsp;</template></el-input></el-form-item><div class="button-group"><el-button v-if="index === form.diversionParamList.length - 1" type="primary" size="small"@click="addFormConfig()">新增</el-button><el-button v-if="index !== 0" type="danger" size="small" @click="delFormConfig(index)">删除</el-button></div>
</div>

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

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

相关文章

x-cmd install | Pillager:Go 语言打造的敏感信息文件系统扫描利器

目录 Pillager 的独特优势安装Pillager 的应用场景Pillager 的核心功能 还在为文件系统中潜在的敏感信息泄露而担忧吗&#xff1f;Pillager 是一款由 Go 语言编写的强大工具&#xff0c;旨在帮助你轻松扫描文件系统&#xff0c;发现隐藏的密钥、密码、API 令牌等敏感信息。 Pil…

大模型(2)——提示工程(Prompt Engineering)

文章目录 一、提示工程的核心概念为什么需要提示工程&#xff1f; 二、提示设计的基本原则三、实用提示工程技巧1. 角色设定法2. 示例引导法&#xff08;Few-Shot Learning&#xff09;3. 分阶段提问4. 负面约束5. 温度&#xff08;Temperature&#xff09;控制 四、不同任务类…

环境搭建

一个简单的请求在加入spring security之前的样子, 在浏览器中输入地址就可以直接访问 <!--引入spring security依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId>&…

院校机试刷题第六天:1134矩阵翻转、1052学生成绩管理、1409对称矩阵

一、1134矩阵翻转 1.题目描述 2.解题思路 很简单的模拟题&#xff0c;甚至只是上下翻转&#xff0c;遍历输出的时候先把最下面那一行输出即可。 3.代码 #include <iostream> #include <vector> using namespace std;int main() {int n;cin >> n;vector&l…

软件架构风格系列(5):数据共享架构

数据共享架构&#xff1a;如何让数据在系统间自由“流淌”&#xff1f; 引言 在企业数字化转型的浪潮中&#xff0c;“数据孤岛”成为横在业务创新面前的大山&#xff1a;营销系统的用户画像无法同步到客服系统&#xff0c;供应链的库存数据难以为销售决策提供支撑…… 此时&…

SAP-13-内表与工作区

内表 作用&#xff1a; 内表是 ABAP 程序中一种非常重要的数据结构&#xff0c;它类似于数据库表&#xff0c;用于在程序运行时存储和处理数据。与数据库表不同的是&#xff0c;内表存在于程序的内存中&#xff0c;数据的读写速度比从数据库中读取要快很多。它可以存储多条具有…

dali本地安装和使用

Dali&#xff08;Distance-matrix ALIgnment&#xff09;是一种广泛使用的蛋白质结构比对工具&#xff0c;主要用于比较蛋白质三维结构之间的相似性。它通过计算蛋白质结构之间的距离矩阵来评估结构之间的相似性&#xff0c;并生成比对结果。 1. 安装 wget http://ekhidna2.b…

Unreal 从入门到精通之SceneCaptureComponent2D实现UI层3D物体360°预览

文章目录 前言SceneCaptureComponent2D实现步骤新建渲染目标新建材质UI控件激活3DPreview鼠标拖动旋转模型最后前言 我们在(电商展示/角色预览/装备查看)等应用场景中,经常会看到这种3D展示的页面。 即使用相机捕获一个3D的模型的视图,然后把这个视图显示在一个UI画布上,…

2024CCPC辽宁省赛 个人补题 ABCEGJL

Dashboard - 2024 CCPC Liaoning Provincial Contest - Codeforces 过题难度 B A J C L E G 铜奖 4 953 银奖 6 991 金奖 8 1664 B&#xff1a; 模拟题 // Code Start Here string s;cin >> s;reverse(all(s));cout << s << endl;A&#xff1a;很…

Java基础 Day17

一、递归 方法直接或者间接调用本身 将大问题, 层层转化为一个与原问题相似的、规模更小的问题来解决 二、异常 程序在编译或执行过程中&#xff0c;出现的非正常的情况 (错误) 语法错误不是异常 1、阅读异常信息 从下往上看&#xff1a;发生异常的位置、异常名称、发生异…

hook原理和篡改猴编写hook脚本

hook原理&#xff1a; hook是常用于js反编译的技术&#xff1b;翻译就是钩子&#xff0c;他的原理就是劫持js的函数然后进行篡改 一段简单的js代码 &#xff1a;这个代码是顺序执行的 function test01(){console.log(test01)test02() } function test02(){console.log(02)tes…

使用 Vue 展示 Markdown 文本

使用 Vue 展示 Markdown 文本可以通过以下几种方法&#xff1a; 方法 1&#xff1a;使用 v-html 指令 可以使用 v-html 指令来渲染 Markdown 文本&#xff1a; <template><div v-html"markdownText"></div> </template> <script>e…

深度解析 Java 中介者模式:重构复杂交互场景的优雅方案

一、中介者模式的核心思想与设计哲学 在软件开发的历史长河中&#xff0c;对象间的交互管理一直是架构设计的核心难题。当多个对象形成复杂的网状交互时&#xff0c;系统会陷入 "牵一发而动全身" 的困境。中介者模式&#xff08;Mediator Pattern&#xff09;作为行…

FreeCAD傻瓜教程-外螺纹的绘制,利用两个实体进行布尔运算来实现

起因&#xff1a;因为要设计一个波珠螺丝固定器&#xff0c;为了不跑偏&#xff0c;需要在螺柱上加工一个直径6mm&#xff0c;深度1.2mm的圆弧凹槽所以想用泉州制造的6.8车铣加工。 但是该加工目前不支持轴向的钻孔&#xff0c;所以想着干脆在两端加上M8的螺栓&#xff0c;也起…

权限控制相关实现

Spring Boot-Shiro-Vue&#xff1a; 这个项目可以满足基本的权限控制需求&#xff0c;前后端都有&#xff0c;开箱即用

Node.js路径处理指南:如何安全获取当前脚本目录路径

本文适用于 Node.js 14.x及以上版本&#xff0c;同时覆盖 CommonJS 和 ES Modules 模块系统 文章目录 一、为什么需要关注路径问题&#xff1f;二、三种核心方法详解方法1&#xff1a;经典方案 __dirname (CommonJS)方法2&#xff1a;ES Modules 解决方案方法3&#xff1a;动态…

web基础

域名概述 2-1 域名的概念&#xff1a;IP 地址不易记忆&#xff0c;域名是互联网络上识别和定位计算机的层次结构式的字符标识&#xff0c;与该计算机的互联网协议 (IP) 地址相对应&#xff0c;用于在数据传输时标识计算机的电子方位&#xff0c;方便人们记忆和输入。 早期使用…

医疗行业数据共享新实践:如何用QuickAPI打通诊疗全流程数据壁垒

在医疗行业&#xff0c;数据的高效流转直接影响诊疗效率和患者体验。某三甲医院在数字化转型中发现&#xff0c;虽然已积累大量核心业务数据&#xff0c;但各科室系统间的数据互通仍存在明显瓶颈——检验科的报告无法实时同步至门诊系统&#xff0c;药房库存数据与采购系统脱节…

高级认知型Agent

目标: 构建一个具备自主规划、多步推理、工具使用、自我反思和环境交互能力的智能代理,使其能够高效、可靠地完成复杂任务。 核心理念: Agent的智能涌现于一个精密的认知循环: 感知 (Perceive) -> 理解与规划 (Think/Plan - 想) -> 信息获取 (Search/Act - 查) -&g…

百度地图的地铁图API所有城市的城市名和citycode的对照关系列表

百度地图的地铁图API所有城市的城市名和citycode的对照关系列表 城市keywordcitycode北京beijing131上海shanghai289广州guangzhou257深圳shenzhen340重庆chongqing132天津tianjin332石家庄shijiazhuang150南京nanjing315成都chengdu75沈阳shenyang58杭州hangzhou179武汉wuhan2…