elementUI表达自定义校验,校验在v-for中
注意:本帖为公开技术贴,不得用做任何商业用途
<el-form :inline="true" :rules="rules" :model="formData" ref="formRef" class="mt-[20px]"><el-form-item label="选择区域" prop="area"><el-select v-model="formData.area" placeholder="请选择" @change="areaChange"><el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></el-form-item><el-row v-for="(item, index) in formData.content" :key="index" class="my-[20px]"><div><div class="mb-[10px]">{{ item.name }}:</div><divclass="border w-[400px] p-[10px] min-h-[45px]"style="border-radius: 5px; white-space: normal; word-break: break-all; border-color: #47536b"text="[14px]"@click="choiceSensor(item.name, item.ids)">{{ item.ids ? item.ids : "点击选择传感器" }}</div></div><div class="ml-[10px] flex items-center"><el-form-itemlabel="取值方式":prop="`content[${index}].valueWay`"style="margin-bottom: 0; margin-top: 20px":rules="[{ required: true, message: '请选择', trigger: 'blur' }]"><el-select v-model="item.valueWay" placeholder="请选择"><el-option v-for="item in valueWayList" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></el-form-item><el-form-itemlabel="环境阈值":prop="`content[${index}].threshold`"style="margin-bottom: 0; margin-top: 20px":rules="[{ required: true, message: '请输入环境阈值', trigger: 'blur' },{ pattern: rule0_1, message: '请输入大于等于1的1位小数', trigger: 'blur' },]"><el-input v-model="item.threshold" placeholder="环境阈值" /></el-form-item><el-form-itemlabel="浮动值":prop="`content[${index}].floating`"style="margin-bottom: 0; margin-top: 20px":rules="[{ required: true, message: '请输入环境阈值', trigger: 'blur' },{ pattern: rule0_1, message: '请输入大于等于1的1位小数', trigger: 'blur' },]"><el-input v-model="item.floating" placeholder="浮动值" /></el-form-item></div></el-row></el-form>
这里ts/js部分
const formRef = ref();
// 保留大于等于0的1位小数
export const rule0_1 = /^(0|[1-9]\d*)(\.\d)?$/
const formData = ref<any>({area: "",content: [{ name: "温度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 温度{ name: "湿度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 湿度{ name: "co", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // co{ name: "co2", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // co2{ name: "照度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 照度{ name: "PM2.5", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // PM2.5],
});
其中取值方式,环境阈值,浮动值,均在循环中完成,自定义的的表单校验,同类型同一种校验
相关文章:
elementUI表达自定义校验,校验在v-for中
注意:本帖为公开技术贴,不得用做任何商业用途 <el-form :inline"true" :rules"rules" :model"formData" ref"formRef" class"mt-[20px]"><el-form-item label"选择区域" prop&qu…...
Elasticsearch 在linux部署 及 Docker 集群部署详解案例示范
1. 在 CentOS 上安装和配置 Elasticsearch 在 CentOS 系统下,安装 Elasticsearch 主要分为以下步骤: 1.1 准备工作 在开始安装之前,确保你的系统满足以下基本条件: CentOS 版本要求:推荐使用 CentOS 7 及以上版本。…...
短信验证码发送实现(详细教程)
短信验证码 接口防刷强检验以及缓存验证码阿里云短信服务操作步骤验证码发送实现 好久没发文啦!最近也是在工作中遇到我自认为需要记录笔记的需求,本人只求日后回顾有迹可寻,不喜勿喷! 废话不多说,直接上代码ÿ…...
P450催化的联芳基偶联反应-文献精读72
Chemoenzymatic Synthesis of Fluorinated Mycocyclosin Enabled by the Engineered Cytochrome P450-Catalyzed Biaryl Coupling Reaction 经工程化的细胞色素P450催化的联芳基偶联反应实现氟代麦环素的化学酶促合成 摘要 将氟原子引入天然产物有望生成具有改良或新颖药理特…...
在不支持AVX的linux上使用PaddleOCR
背景 公司的虚拟机CPU居然不支持avx, 默认的paddlepaddle的cpu版本又需要有支持avx才行,还想用PaddleOCR有啥办法呢? 是否支持avx lscpu | grep avx 支持avx的话,会显示相关信息 如果不支持的话,python运行时导入paddle会报错 怎么办呢 方案一 找公司it,看看虚拟机为什么…...
Python数据分析——Numpy
纯个人python的一个小回忆笔记,当时假期花两天学的python,确实时隔几个月快忘光了,为了应付作业才回忆起来,不涉及太多基础,适用于有一定编程基础的参考回忆。 这一篇笔记来源于下面哔哩哔哩up主的视频: 一…...
JMeter快速入门示例
JMeter是一款开源的性能测试工具,常用于对Web服务和接口进行性能测试。 下载安装 官方下载网址: https://jmeter.apache.org/download_jmeter.cgi也可以到如下地址下载:https://download.csdn.net/download/oscar999/89910834 这里下载Wi…...
【333基于Java Web的考编论坛网站的设计与实现
毕 业 设 计(论 文) 考编论坛网站设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计…...
计算机网络关键名词中英对照
物理层 IMP - Interface Message Processor - 接口信息处理机 MODEM - Modulator-Demodulator - 调制解调器 LAN - Local Area Network - 局域网 FDM - Frequency Division Multiplexing - 频分复用 TDM - Time Division Multiplexing - 时分复用 STDM - Statistical Time…...
二叉树的学习
除了根节点外的其他节点只有一个直接前驱,有多个直接前驱的逻辑结构叫做图 任何一个树都可以看成是一个根节点和若干个不相交的子树构成的; 构建思维导图时使用树形结构 题目中给出AB是堂兄弟节点说明他们处在同一层 描述两节点之间的路径是从上到下的,同层没有路径,一条边记录…...
免费开源的医疗信息提取系统:提升超声波影像的诊断价值
一、系统概述 思通数科推出的医疗信息精准抽取系统,致力于解决当前医疗行业面临的信息碎片化和数据管理难题。传统医疗过程中,超声波影像数据与诊断报告之间的脱节,往往导致信息无法有效整合,影响医生的诊断效率与准确性。我们的…...
Bash 中的 ${} 和 $() 有什么区别 ?
Bash (Bourne-Again SHell) 是一种流行的 Unix SHell,用于编写脚本。如果您使用 Bash 脚本,那么了解不同的语法元素对于提高脚本的效率和避免错误是很重要的。 在本文中,我们将解释 Bash 中 ${} 和 $() 语法之间的区别,并向您展示…...
SPSS、R语言因子分析FA、主成分分析PCA对居民消费结构数据可视化分析
全文链接:https://tecdat.cn/?p37952 分析师:Ting Mei 在经济发展的大背景下,居民消费结构至关重要。本文围绕居民消费结构展开深入研究,运用 SPSS25.0 和 R 语言,以因子分析法和主成分分析法对东北三省居民消费价格指…...
高级SQL技巧掌握
高级SQL技巧掌握 在数据驱动的时代,掌握SQL不仅仅是为了解决具体问题,它更像是一把钥匙,帮助你打开数据分析的大门。你准备好提升你的SQL技能了吗?在这篇文章中,我们将一起探索十个必备的高级SQL查询技巧,这些技巧将帮助你更有效率地进行数据处理与分析。 1. 常见表表达…...
数组实例之三子棋的实现(C语言)
目录 前言 一、三子棋实现的逻辑 二、三子棋的实现 2.1文件的创建添加 2.2 test文件基本逻辑 2.2.1菜单的实现 2.2.2菜单的选择 2.2.3game函数棋盘的实现 2.3game.c文件的编写 2.3.1初始化函数的模块 2.3.2棋盘打印的模块 2.3.3实现棋盘界面的打印 2.3.4实现玩家下…...
【Linux驱动开发】设备树节点驱动开发入门
【Linux驱动开发】设备树节点驱动开发入门 文章目录 设备树文件设备树文件驱动开发附录:嵌入式Linux驱动开发基本步骤开发环境驱动文件编译驱动安装驱动自动创建设备节点文件 驱动开发驱动设备号地址映射,虚拟内存和硬件内存地址字符驱动旧字符驱动新字…...
C++——string的模拟实现(下)
目录 成员函数 3.4 修改操作 (3)insert()函数 (4)pop_back()函数 (5)erase()函数 (6)swap()函数 3.5 查找操作 (1)find()函数 (2)substr()函数 3.6 重载函数 (1)operator赋值函数 (2)其他比较函数 (3)流插入和流提取 完整代码 结束语 第一篇链接:C——…...
面试 Java 基础八股文十问十答第二十九期
面试 Java 基础八股文十问十答第二十九期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)类加载过程 类加载…...
454.四数相加||
题目: 454. 四数相加 II - 力扣(LeetCode) 思路: 考虑到时间复杂度问题,本题最重要的是要将四个数组划分成两个部分,每个部分(n^2)的时间复杂度,选取数据结构时,考虑到既要存储元素(key),又要有元素次数…...
禅道源码部署
文章目录 禅道部署1.环境部署安装httpd和mariadb安装php 2.安装禅道首先进行httpd服务的配置安装禅道 禅道部署 1.环境部署 安装lamp环境 组件版本httpdyum安装mariadbyum安装phpphp-7.4.33 选择一个php版本就行,我们这里选择的是7.4.33 安装httpd和mariadb [r…...
PC显示器HDR选购指南:DisplayHDR标准详解与实战应用
1. 从混乱到清晰:PC显示器HDR标准的演进与现状如果你最近在挑选一台新的PC显示器,尤其是为了游戏、影音剪辑或者专业设计,那么“HDR”这个标签你一定绕不开。它被印在包装盒上,出现在电商页面的标题里,是销售员口中的“…...
openOii:开源工业信息集成框架架构解析与实战指南
1. 项目概述与核心价值最近在开源社区里,一个名为openOii的项目引起了我的注意。这个由开发者 Xeron2000 发起的项目,从名字上就透着一股“开放”和“工业”的气息。作为一个在工业自动化和数据集成领域摸爬滚打了十多年的老兵,我深知在制造业…...
use Hyperf\View\View;的生命周期的庖丁解牛
它的本质是:Hyperf\View\View 不是一个简单的工具类,而是一个由 Hyperf DI 容器管理的 服务实例 (Service Instance)。它的生命周期始于 容器启动时的元数据注册,经历 请求触发时的懒加载/实例化,执行 模板解析与渲染,…...
NOI Linux 2.0不只是竞赛工具:我用它搭建了一个轻量级C++/Python学习环境(含GUIDE、VS Code配置)
NOI Linux 2.0:从竞赛平台到全能编程学习环境的蜕变指南 当大多数人提起NOI Linux 2.0时,第一反应往往是"信息学奥赛专用系统"。但作为一个深度使用过各类Linux发行版的开发者,我发现这个官方定制系统其实是被严重低估的理想编程学…...
告别BRAM!手把手教你用Vivado 2020.1为MicroBlaze工程挂载DDR3内存(附完整MIG配置流程)
突破FPGA内存限制:MicroBlaze工程DDR3内存扩展实战指南 在FPGA开发中,MicroBlaze软核处理器因其灵活性和可定制性广受欢迎,但随着应用复杂度提升,内部BRAM的容量限制很快成为性能瓶颈。本文将带您深入探索如何通过Xilinx Vivado 2…...
独立开发者生存指南:一个人搞定产品、开发、运营
一、从测试视角洞察独立开发的核心逻辑软件测试从业者转型独立开发者,最大的优势在于对产品质量的天然敏感度和用户视角的深度理解。在大厂分工体系中,测试人员是距离用户反馈最近的角色之一,每天都在与产品的bug、用户的抱怨打交道ÿ…...
OpenMMLab MMTracking 目标跟踪算法库
MMTracking是OpenMMLab(商汤科技与港中文MMLab联合推出)体系下的一款开源视频目标感知工具箱。你可以把它理解为“视频版”的MMDetection,它将该领域内纷繁复杂的算法、数据集和评估标准,统一整合到了一个高效、模块化的框架中。 …...
Allegro丝印层加汉字和防静电标识?我找到了比自带功能更香的免费Skill工具
Allegro丝印层高效处理方案:汉字与防静电标识的终极实践指南 在PCB设计的最后阶段,丝印层的处理往往成为工程师们头疼的问题。尤其是当设计需要添加中文注释、企业标识或行业标准符号(如防静电警告标志)时,Allegro原生…...
ClawSuite:模块化网络安全工具集的设计原理与实战应用
1. 项目概述:ClawSuite,一个被低估的网络安全工具集如果你在网络安全领域摸爬滚打过几年,尤其是做过渗透测试或者红队评估,那你肯定对Metasploit、Nmap、Burp Suite这些名字如数家珍。但今天我想聊一个在GitHub上相对低调…...
Emacs集成ChatGPT:AI助手无缝融入编辑器工作流
1. 项目概述:在Emacs中集成ChatGPT的魔法工具作为一名在Emacs生态里摸爬滚打了十多年的老用户,我对于在编辑器里“折腾”各种生产力工具一直乐此不疲。当ChatGPT这类大语言模型(LLM)横空出世时,我的第一反应就是&#…...
