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

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中

注意&#xff1a;本帖为公开技术贴&#xff0c;不得用做任何商业用途 <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 系统下&#xff0c;安装 Elasticsearch 主要分为以下步骤&#xff1a; 1.1 准备工作 在开始安装之前&#xff0c;确保你的系统满足以下基本条件&#xff1a; CentOS 版本要求&#xff1a;推荐使用 CentOS 7 及以上版本。…...

短信验证码发送实现(详细教程)

短信验证码 接口防刷强检验以及缓存验证码阿里云短信服务操作步骤验证码发送实现 好久没发文啦&#xff01;最近也是在工作中遇到我自认为需要记录笔记的需求&#xff0c;本人只求日后回顾有迹可寻&#xff0c;不喜勿喷&#xff01; 废话不多说&#xff0c;直接上代码&#xff…...

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的一个小回忆笔记&#xff0c;当时假期花两天学的python&#xff0c;确实时隔几个月快忘光了&#xff0c;为了应付作业才回忆起来&#xff0c;不涉及太多基础&#xff0c;适用于有一定编程基础的参考回忆。 这一篇笔记来源于下面哔哩哔哩up主的视频&#xff1a; 一…...

JMeter快速入门示例

JMeter是一款开源的性能测试工具&#xff0c;常用于对Web服务和接口进行性能测试。 下载安装 官方下载网址&#xff1a; https://jmeter.apache.org/download_jmeter.cgi也可以到如下地址下载&#xff1a;https://download.csdn.net/download/oscar999/89910834 这里下载Wi…...

【333基于Java Web的考编论坛网站的设计与实现

毕 业 设 计&#xff08;论 文&#xff09; 考编论坛网站设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计…...

计算机网络关键名词中英对照

物理层 IMP - Interface Message Processor - 接口信息处理机 MODEM - Modulator-Demodulator - 调制解调器 LAN - Local Area Network - 局域网 FDM - Frequency Division Multiplexing - 频分复用 TDM - Time Division Multiplexing - 时分复用 STDM - Statistical Time…...

二叉树的学习

除了根节点外的其他节点只有一个直接前驱,有多个直接前驱的逻辑结构叫做图 任何一个树都可以看成是一个根节点和若干个不相交的子树构成的; 构建思维导图时使用树形结构 题目中给出AB是堂兄弟节点说明他们处在同一层 描述两节点之间的路径是从上到下的,同层没有路径,一条边记录…...

免费开源的医疗信息提取系统:提升超声波影像的诊断价值

一、系统概述 思通数科推出的医疗信息精准抽取系统&#xff0c;致力于解决当前医疗行业面临的信息碎片化和数据管理难题。传统医疗过程中&#xff0c;超声波影像数据与诊断报告之间的脱节&#xff0c;往往导致信息无法有效整合&#xff0c;影响医生的诊断效率与准确性。我们的…...

Bash 中的 ${} 和 $() 有什么区别 ?

Bash (Bourne-Again SHell) 是一种流行的 Unix SHell&#xff0c;用于编写脚本。如果您使用 Bash 脚本&#xff0c;那么了解不同的语法元素对于提高脚本的效率和避免错误是很重要的。 在本文中&#xff0c;我们将解释 Bash 中 ${} 和 $() 语法之间的区别&#xff0c;并向您展示…...

SPSS、R语言因子分析FA、主成分分析PCA对居民消费结构数据可视化分析

全文链接&#xff1a;https://tecdat.cn/?p37952 分析师&#xff1a;Ting Mei 在经济发展的大背景下&#xff0c;居民消费结构至关重要。本文围绕居民消费结构展开深入研究&#xff0c;运用 SPSS25.0 和 R 语言&#xff0c;以因子分析法和主成分分析法对东北三省居民消费价格指…...

高级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驱动开发】设备树节点驱动开发入门 文章目录 设备树文件设备树文件驱动开发附录&#xff1a;嵌入式Linux驱动开发基本步骤开发环境驱动文件编译驱动安装驱动自动创建设备节点文件 驱动开发驱动设备号地址映射&#xff0c;虚拟内存和硬件内存地址字符驱动旧字符驱动新字…...

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)流插入和流提取 完整代码 结束语 第一篇链接&#xff1a;C——…...

面试 Java 基础八股文十问十答第二十九期

面试 Java 基础八股文十问十答第二十九期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;类加载过程 类加载…...

454.四数相加||

题目: 454. 四数相加 II - 力扣&#xff08;LeetCode&#xff09; 思路: 考虑到时间复杂度问题&#xff0c;本题最重要的是要将四个数组划分成两个部分&#xff0c;每个部分(n^2)的时间复杂度&#xff0c;选取数据结构时&#xff0c;考虑到既要存储元素(key),又要有元素次数…...

禅道源码部署

文章目录 禅道部署1.环境部署安装httpd和mariadb安装php 2.安装禅道首先进行httpd服务的配置安装禅道 禅道部署 1.环境部署 安装lamp环境 组件版本httpdyum安装mariadbyum安装phpphp-7.4.33 选择一个php版本就行&#xff0c;我们这里选择的是7.4.33 安装httpd和mariadb [r…...

️ Vulnhuntr:利用大型语言模型(LLM)进行零样本漏洞发现的工具

在网络安全领域&#xff0c;漏洞的发现和修复是保护系统安全的关键。今天&#xff0c;我要向大家介绍一款创新的工具——Vulnhuntr&#xff0c;这是一款利用大型语言模型&#xff08;LLM&#xff09;进行零样本漏洞发现的工具&#xff0c;能够自动分析代码&#xff0c;检测远程…...

【Android】多渠道打包配置

目录 简介打包配置签名配置渠道配置配置打包出来的App名称正式包与测试包配置 打包方式开发工具打包命令行打包 优缺点 简介 多渠道打包 是指在打包一个 Android 应用时&#xff0c;一次编译生成多个 APK 文件&#xff0c;每个 APK 文件针对一个特定的渠道。不同的渠道可能代表…...

Spring Boot Configuration和AutoConfiguration加载逻辑和加载顺序调整

在spring中, AutoConfiguration也是一个种Configuration,只是AutoConfiguration是不能使用proxy的。 而且spring对于两者的加载顺序也不是一视同仁,是有顺序的。spring会先加载@SpringBootApplication可达的且标注了@Configuration的类,这个过程会将@AutoConfiguration标注…...

点餐系统需求分析说明书(软件工程分析报告JAVA)

目录 1 引言 4 1.1 编写目的 4 1.2 项目背景 4 1.3 定义 4 1.4 预期的读者 5 1.5 参考资料 5 2 任务概述 5 2.1 目标 5 2.2 运行环境 5 2.3 条件与限制 6 3 数据描述 6 3.1 静态数据 6 3.2 动态数据 6 3.3 数据库介绍 6 3.4 对象模型 6 3.5 数据采集 7 4 动态模型 7 4.1 脚本 …...

Python条形图 | 指标(特征)重要性图的绘制

在数据科学和机器学习的工作流程中&#xff0c;特征选择是一个关键步骤。通过评估每个特征对模型预测能力的影响&#xff0c;我们可以选择最有意义的特征&#xff08;指标&#xff09;&#xff0c;从而提高模型的性能并减少过拟合。本文将介绍如何使用 Python 的 Seaborn 和 Ma…...

危险物品图像分割系统:一键训练

危险物品图像分割系统源码&#xff06;数据集分享 [yolov8-seg-GFPN&#xff06;yolov8-seg-CSwinTransformer等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Global…...

城市景色视频素材下载好去处

在制作短视频、Vlog 或商业宣传片时&#xff0c;城市景色视频素材能为作品增添现代感与活力。繁华都市、流光溢彩的夜景、清晨街道等都是展现城市魅力的好素材。那么城市景色视频素材去哪里下载呢&#xff1f; 蛙学网 是专为短视频创作者打造的素材平台&#xff0c;城市景色素材…...

基于SSM美容院管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;套餐类型管理&#xff0c;美容预约管理&#xff0c;生日提醒管理&#xff0c;管理员管理&#xff0c;系统管理 员工账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#…...

Threejs 实现3D 地图(04)3d 地图的柱状图和文字显示

3d 地图的数据展示 代码仓库&#xff1a; King/threejs-3d-map 核心代码&#xff1a; function createText(feature, level, font) {if (feature.properties.name) {const [x_XYZ, y_XYZ] handleProject(feature.properties.center)// 缺点&#xff1a;首次渲染很慢 无法使…...

Oracle 第2章:安装与配置Oracle

安装与配置Oracle数据库是一项复杂但有序的过程。以下是对Oracle数据库安装与配置的概述&#xff0c;包括系统需求与硬件推荐&#xff0c;以及详细的安装步骤。 系统需求与硬件推荐 系统需求 在安装Oracle数据库之前&#xff0c;需要确保目标系统满足Oracle官方规定的最低要…...

哪些网站用黑体做的/云搜索app下载

&#x1f320; 『精品学习专栏导航帖』 &#x1f433;最适合入门的100个深度学习实战项目&#x1f433;&#x1f419;【PyTorch深度学习项目实战100例目录】项目详解 数据集 完整源码&#x1f419;&#x1f436;【机器学习入门项目10例目录】项目详解 数据集 完整源码&…...

弄美团网站的一般一个做赚多少钱/外媒头条最新消息

我的有道云笔记 React 事件&#xff1a; 1、不能使用 return false; 来阻止元素的默认行为。需要在方法的最前面使用 e.preventDefault() 来阻止元素的默认行为&#xff08;例如&#xff1a;a 标签的跳转链接行为&#xff09;&#xff1b; 2、在 React 中 e 是一个合成事件&…...

苏州网站设计都选苏州聚尚网络/宣传软文是什么

ANDROID STUDIO集成GENYMOTION模拟器&#xff1a; http://hao.jser.com/archive/5393/...

响应式网站建设 苏州/网球新闻最新消息

1、linux禁止ping#echo 1>/proc/sys/net/ipv4/icmp_echo_ignore_all或#iptables -A INPUT -p icmp --icmp-type 8 -s 0/0 -j DROP2、ssh登录只要在ssh的配置文件&#xff1a;sshd_config中添加如下一行即可Allowusers username192.168.100.1上述只允许IP地址是192.168.100.…...

大连工业大学专升本/seo网站关键词优化快速官网

第一篇稿子&#xff0c;也是激励自己的。...

南充网站建设略奥网络/落实20条优化措施

Description 给出一个长度为N的非负整数序列A[i]&#xff0c;对于所有1 ≤ k ≤ (N 1) / 2&#xff0c;输出A[1], A[2], …, A[2k - 1]的中位数。即前1&#xff0c;3&#xff0c;5&#xff0c;……个数的中位数。 N ≤ 100000 Solution 这题方法很多&#xff0c;这里介绍splay…...