vue+elementUI实现在表格中添加输入框并校验的功能
背景:
vue2+elmui
需求:
需要在一个table中添加若干个输入框,并且在提交时需要添加校验
思路:
- 当需要校验的时候可以考虑添加form表单来触发校验,因此需要在table外面套一层form表单,表单的属性就是ref,model,rules三件套,ref来获取组件实例validate从而进行校验,model为绑定的数据,rules为对应规则。
- 在每一个input外面套一层form-item,并且添加对应的校验规则
- 通过计算属性提炼出需要绑定的数据
- 设置校验函数,在进行提交时调用该方法,获取这个方法的返回值,若是false则return,否则进行后续的代码逻辑
实现代码:
<el-form ref="formRef" :model="validateForm" :rules="rules"><el-table :data="validateForm.tableData" border height="300"><el-table-column label="安全最低温" property="tempMin"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.tempMin'" :rules="rules.tempMin"><el-input v-model="scope.row.tempMin" placeholder="请填写安全最低温" size="small" /></el-form-item></template></el-table-column><el-table-column label="安全最高温" property="tempMax"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.tempMax'" :rules="rules.tempMax"><el-input v-model="scope.row.tempMax" placeholder="请填写安全最高温" size="small" /></el-form-item></template></el-table-column><el-table-column label="温度预警区间" property="tempWarningVal"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.tempWarningVal'" :rules="rules.tempWarningVal"><el-input v-model="scope.row.tempWarningVal" placeholder="请填写预警" size="small" /></el-form-item></template></el-table-column><el-table-column label="安全湿度上限" property="humidityMax"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.humidityMax'" :rules="rules.humidityMax"><el-input v-model="scope.row.humidityMax" placeholder="请填写安全最低温" size="small" /></el-form-item></template></el-table-column><el-table-column label="安全湿度下限" property="humidityMin"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.humidityMin'" :rules="rules.humidityMin"><el-input v-model="scope.row.humidityMin" placeholder="请填写安全最高温" size="small" /></el-form-item></template></el-table-column><el-table-column label="湿度预警区间" property="humidityWarningVal"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.humidityWarningVal'" :rules="rules.humidityWarningVal"><el-input v-model="scope.row.humidityWarningVal" placeholder="请填写安全最低温" size="small" /></el-form-item></template></el-table-column></el-table></el-form>computed: {
// 通过计算属性来得出table绑定的数据validateForm() {const validateForm = {}const dataArr = this.gridData.map((item, index) => {item.index = indexreturn item})const tempList = dataArr.filter(item => item.outSiteCode === this.outSiteSelect)validateForm.tableData = tempListreturn validateForm}},rules: {
// 设置校验规则tempMin: [{ required: true, message: '', trigger: ['blur', 'change'] }],tempMax: [{ required: true, message: '', trigger: ['blur', 'change'] }],tempWarningVal: [{ required: true, message: '', trigger: ['blur', 'change'] }],humidityMax: [{ required: true, message: '', trigger: ['blur', 'change'] }],humidityMin: [{ required: true, message: '', trigger: ['blur', 'change'] }],humidityWarningVal: [{ required: true, message: '', trigger: ['blur', 'change'] }]},/*校验函数,通过设置flag来校验每一项,如果没填写就是false,并且返回*/validateTable() {let flag = falsethis.$refs.formRef.validate((valid) => {if (!valid) flag = falseelse { flag = true }})return flag},/*提交函数,提交表单前,进行校验,没通过就return*/handleFormChange() {const validateFlag = this.validateTable()if (!validateFlag) return
// ...后续的提交表单逻辑
}
最终效果:

相关文章:
vue+elementUI实现在表格中添加输入框并校验的功能
背景: vue2elmui 需求: 需要在一个table中添加若干个输入框,并且在提交时需要添加校验 思路: 当需要校验的时候可以考虑添加form表单来触发校验,因此需要在table外面套一层form表单,表单的属性就是ref…...
为国产加油:“缺芯少屏”暂缓,另一领域,也要加把劲
说起咱中国之前的“缺芯少屏”,真的是让人挺闹心的。 不过呢,为了改变这个状况,咱们的工程师们可是费了不少劲儿,辛辛苦苦努力了数十年。现在好了,咱们也迎来了柔性屏的时代。 柔性屏 说起来,在触摸屏或者…...
【Qnx】Qnx coredump解析
Qnx coredump解析 coredump文件 Qnx运行的程序崩溃时,会生成coredump文件。 默认情况下这些文件默认会保存在/var/log/*.core 文件中。 解析coredump文件,可以帮忙加快分析程序崩溃的原因,比如了解崩溃的堆栈。 通常可以使用gdb和coreinfo…...
超级签名源码/超级签/ios分发/签名端本地linux服务器完成签名
该系统完全在linux下运行,不存在使用第三方收费工具,市面上很多系统都是使用的是第三方收费系统,例如:某心签名工具,某测侠等,不开源而且需要每年交费,这种系统只是在这些工具的基础上套了一层壳…...
RocketMQ在Centos7系统上单机部署
最近因为一些信创问题,要将RabbitMQ替换为RocketMQ,因此在此分享一些RocketMQ在Centos7系统上单机部署相关过程。 优缺点 RocketMQ的优点: 性能优越:RocketMQ在处理大量消息时,性能优于RabbitMQ。当面临每秒数万到数…...
Vue37-非单文件组件
一、组件的两种编写形式: 非单文件组件;单文件组件。 二、创建一个组件 2-1、组件中的el 组件中不写el,不说为谁服务。 2-2、组件中的data 因为对象形式,多处复用的话,有引用关系,改一处,另一…...
CSS实现经典打字小游戏《生死时速》
🌻 前言 CSS 中有这样一个模块:Motion Path 运动模块,它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用,并且利用它实现我小时候电脑课经常玩的一个打字游戏:金山打字的《生死时速》。 &…...
推箱子-小游戏
学习目标: 巩固Java基础,数据类型、二维数组、条件语句等; 效果展示:...
AI数字人的开源解决方案
目前,国内外已经涌现出一些优秀的数字人开源解决方案,这些解决方案为开发者提供了构建数字人应用的工具和基础设施。以下是一些比较知名的数字人开源解决方案。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1…...
java写一个验证码
生成验证码 内容:可以是小写字母,也可以是大写字母,还可以是数字 规则 长度为5 内容中是四位字母,1位数字。 其中数字只有1位,但是可以出现在任意的位置。 package User;import java.util.ArrayList; import jav…...
【星海随笔】ELK优化
ELS 再遇到大的日志文件的时候不会自动进行清理的,我们可以通过 logrotate 转储工具进行操作。 该命令是基于 Cron 实现,由系统执行,当然也可以手动进行执行例如 logrotate -f configfile# more /etc/logrotate.confweekly // 默认每一周执行一次rotate轮转工作 r…...
SQL Auto Increment
SQL Auto Increment 在关系型数据库中,自动增量(Auto Increment)是一个常见且实用的特性。它允许数据库自动为表中插入的新行分配唯一的标识符,通常用于主键字段。本文将深入探讨SQL中的自动增量功能,包括其工作原理、…...
网络安全练气篇——PHP编程语言基础
目录 PHP基础 一、PHP简介与环境搭建 什么是PHP? PHP环境安装 代码编辑选择 二、基本语法 PHP基本语法操作 PHP变量与输出 啥是常量? PHP注释 PHP单引号双引号声明 三、PHP表单 PHP表单 四、登录界面搭建与讲解 构建登陆页面 登陆页面端 服务器端…...
LabVIEW程序内存泄漏分析与解决方案
维护他人编写的LabVIEW程序时,若发现程序运行时间越长,占用内存越大直至崩溃,通常是内存泄漏导致的。本文从多角度分析内存泄漏的可能原因,包括数组和字符串处理、未释放的资源、循环中的对象创建等,并提供具体的解决方…...
JVM垃圾回收器介绍
Serial GC: 算法: 使用的是标记-清除算法。特点: 串行执行,适用于单CPU环境或较小的堆内存配置。在新生代和老年代的回收中都是单线程执行,因此在进行垃圾回收时会暂停所有应用线程(Stop-The-World)。 Parallel GC (也称为吞吐量优…...
subprocess隐藏cmd窗口
process subprocess.Popen(command, shellTrue, stdoutsubprocess.PIPE, stderrsubprocess.PIPE,creationflagssubprocess.CREATE_NO_WINDOW) 添加参数即可不显示cmd运行窗口 creationflagssubprocess.CREATE_NO_WINDOW...
编程前端看什么书比较好:深入解析与推荐
编程前端看什么书比较好:深入解析与推荐 在编程前端的学习道路上,书籍无疑是我们最宝贵的财富。一本好的书籍,不仅可以提供系统的知识体系,还能引导我们深入探索技术的奥秘。然而,面对市面上琳琅满目的前端书籍&#…...
HarmonyOS(36) DevEco Studio 配置debug和release
在android开发中可以在build.gradle来配置realease和debug,在HarmonyOS中可以通过build-profile.json5文件中通过buildModeSet配置: 在DevEco Studio 中可以通过下面来选择运行debug还是release: 我们可以通过BuildProfile.ets里面的静态变量获取当前…...
PHP CGI Windows平台远程代码执行漏洞(CVE-2024-4577)复现
PHP语言在设计时忽略了Windows对字符编码转换的 Best-Fit 特性,导致未授权的攻击者可以通过特定字符串绕过 CVE-2012-1823 补丁,执行任意PHP代码,导致服务器失陷。 1.漏洞级别 高危 2.漏洞搜索 fofa: app"XAMPP"3.影响范围 P…...
WHAT - React 学习系列(二)
目录 一、官方介绍二、框架具体对比1. Next.js(Pages Router)2. Remix3. Gatsby4. Expo(用于原生应用)5. Next.js(App Router)Next.js App Router主要特性与 Pages Router 的对比 具体使用示例创建 App Router 项目目录结构示例示例代码 总结 这一篇主要…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
