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

vue+elementUI实现在表格中添加输入框并校验的功能

背景:

vue2+elmui

需求:

需要在一个table中添加若干个输入框,并且在提交时需要添加校验

思路:

  1. 当需要校验的时候可以考虑添加form表单来触发校验,因此需要在table外面套一层form表单,表单的属性就是ref,model,rules三件套,ref来获取组件实例validate从而进行校验,model为绑定的数据,rules为对应规则。
  2. 在每一个input外面套一层form-item,并且添加对应的校验规则
  3. 通过计算属性提炼出需要绑定的数据
  4. 设置校验函数,在进行提交时调用该方法,获取这个方法的返回值,若是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实现在表格中添加输入框并校验的功能

背景&#xff1a; vue2elmui 需求&#xff1a; 需要在一个table中添加若干个输入框&#xff0c;并且在提交时需要添加校验 思路&#xff1a; 当需要校验的时候可以考虑添加form表单来触发校验&#xff0c;因此需要在table外面套一层form表单&#xff0c;表单的属性就是ref…...

为国产加油:“缺芯少屏”暂缓,另一领域,也要加把劲

说起咱中国之前的“缺芯少屏”&#xff0c;真的是让人挺闹心的。 不过呢&#xff0c;为了改变这个状况&#xff0c;咱们的工程师们可是费了不少劲儿&#xff0c;辛辛苦苦努力了数十年。现在好了&#xff0c;咱们也迎来了柔性屏的时代。 柔性屏 说起来&#xff0c;在触摸屏或者…...

【Qnx】Qnx coredump解析

Qnx coredump解析 coredump文件 Qnx运行的程序崩溃时&#xff0c;会生成coredump文件。 默认情况下这些文件默认会保存在/var/log/*.core 文件中。 解析coredump文件&#xff0c;可以帮忙加快分析程序崩溃的原因&#xff0c;比如了解崩溃的堆栈。 通常可以使用gdb和coreinfo…...

超级签名源码/超级签/ios分发/签名端本地linux服务器完成签名

该系统完全在linux下运行&#xff0c;不存在使用第三方收费工具&#xff0c;市面上很多系统都是使用的是第三方收费系统&#xff0c;例如&#xff1a;某心签名工具&#xff0c;某测侠等&#xff0c;不开源而且需要每年交费&#xff0c;这种系统只是在这些工具的基础上套了一层壳…...

RocketMQ在Centos7系统上单机部署

最近因为一些信创问题&#xff0c;要将RabbitMQ替换为RocketMQ&#xff0c;因此在此分享一些RocketMQ在Centos7系统上单机部署相关过程。 优缺点 RocketMQ的优点&#xff1a; 性能优越&#xff1a;RocketMQ在处理大量消息时&#xff0c;性能优于RabbitMQ。当面临每秒数万到数…...

Vue37-非单文件组件

一、组件的两种编写形式&#xff1a; 非单文件组件&#xff1b;单文件组件。 二、创建一个组件 2-1、组件中的el 组件中不写el&#xff0c;不说为谁服务。 2-2、组件中的data 因为对象形式&#xff0c;多处复用的话&#xff0c;有引用关系&#xff0c;改一处&#xff0c;另一…...

CSS实现经典打字小游戏《生死时速》

&#x1f33b; 前言 CSS 中有这样一个模块&#xff1a;Motion Path 运动模块&#xff0c;它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用&#xff0c;并且利用它实现我小时候电脑课经常玩的一个打字游戏&#xff1a;金山打字的《生死时速》。 &…...

推箱子-小游戏

学习目标&#xff1a; 巩固Java基础&#xff0c;数据类型、二维数组、条件语句等&#xff1b; 效果展示&#xff1a;...

AI数字人的开源解决方案

目前&#xff0c;国内外已经涌现出一些优秀的数字人开源解决方案&#xff0c;这些解决方案为开发者提供了构建数字人应用的工具和基础设施。以下是一些比较知名的数字人开源解决方案。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…...

java写一个验证码

生成验证码 内容&#xff1a;可以是小写字母&#xff0c;也可以是大写字母&#xff0c;还可以是数字 规则 长度为5 内容中是四位字母&#xff0c;1位数字。 其中数字只有1位&#xff0c;但是可以出现在任意的位置。 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 在关系型数据库中&#xff0c;自动增量&#xff08;Auto Increment&#xff09;是一个常见且实用的特性。它允许数据库自动为表中插入的新行分配唯一的标识符&#xff0c;通常用于主键字段。本文将深入探讨SQL中的自动增量功能&#xff0c;包括其工作原理、…...

网络安全练气篇——PHP编程语言基础

目录 PHP基础 一、PHP简介与环境搭建 什么是PHP&#xff1f; PHP环境安装 代码编辑选择 二、基本语法 PHP基本语法操作 PHP变量与输出 啥是常量? PHP注释 PHP单引号双引号声明 三、PHP表单 PHP表单 四、登录界面搭建与讲解 构建登陆页面 登陆页面端 服务器端…...

LabVIEW程序内存泄漏分析与解决方案

维护他人编写的LabVIEW程序时&#xff0c;若发现程序运行时间越长&#xff0c;占用内存越大直至崩溃&#xff0c;通常是内存泄漏导致的。本文从多角度分析内存泄漏的可能原因&#xff0c;包括数组和字符串处理、未释放的资源、循环中的对象创建等&#xff0c;并提供具体的解决方…...

JVM垃圾回收器介绍

Serial GC: 算法: 使用的是标记-清除算法。特点: 串行执行&#xff0c;适用于单CPU环境或较小的堆内存配置。在新生代和老年代的回收中都是单线程执行&#xff0c;因此在进行垃圾回收时会暂停所有应用线程&#xff08;Stop-The-World&#xff09;。 Parallel GC (也称为吞吐量优…...

subprocess隐藏cmd窗口

process subprocess.Popen(command, shellTrue, stdoutsubprocess.PIPE, stderrsubprocess.PIPE,creationflagssubprocess.CREATE_NO_WINDOW) 添加参数即可不显示cmd运行窗口 creationflagssubprocess.CREATE_NO_WINDOW...

编程前端看什么书比较好:深入解析与推荐

编程前端看什么书比较好&#xff1a;深入解析与推荐 在编程前端的学习道路上&#xff0c;书籍无疑是我们最宝贵的财富。一本好的书籍&#xff0c;不仅可以提供系统的知识体系&#xff0c;还能引导我们深入探索技术的奥秘。然而&#xff0c;面对市面上琳琅满目的前端书籍&#…...

HarmonyOS(36) DevEco Studio 配置debug和release

在android开发中可以在build.gradle来配置realease和debug,在HarmonyOS中可以通过build-profile.json5文件中通过buildModeSet配置&#xff1a; 在DevEco Studio 中可以通过下面来选择运行debug还是release&#xff1a; 我们可以通过BuildProfile.ets里面的静态变量获取当前…...

PHP CGI Windows平台远程代码执行漏洞(CVE-2024-4577)复现

PHP语言在设计时忽略了Windows对字符编码转换的 Best-Fit 特性&#xff0c;导致未授权的攻击者可以通过特定字符串绕过 CVE-2012-1823 补丁&#xff0c;执行任意PHP代码&#xff0c;导致服务器失陷。 1.漏洞级别 高危 2.漏洞搜索 fofa: app"XAMPP"3.影响范围 P…...

WHAT - React 学习系列(二)

目录 一、官方介绍二、框架具体对比1. Next.js(Pages Router)2. Remix3. Gatsby4. Expo&#xff08;用于原生应用&#xff09;5. Next.js(App Router)Next.js App Router主要特性与 Pages Router 的对比 具体使用示例创建 App Router 项目目录结构示例示例代码 总结 这一篇主要…...

告别重复造轮子:用快马平台高效生成ibbot开发脚手架与核心模块

今天想和大家分享一个提升ibbot开发效率的实用技巧。作为一个经常需要开发对话机器人的程序员&#xff0c;我发现每次从零开始搭建项目结构、编写基础模块特别耗时。最近尝试用InsCode(快马)平台生成项目脚手架&#xff0c;效果出乎意料的好。 项目结构自动生成 平台能根据自然…...

多层PCB板层叠结构详解:如何选择适合你的设计?

多层PCB板层叠结构详解&#xff1a;如何选择适合你的设计&#xff1f; 在电子设计领域&#xff0c;PCB&#xff08;印制电路板&#xff09;是连接各种电子元器件的核心载体。随着电子产品功能的日益复杂&#xff0c;简单的单层或双层PCB已无法满足现代设计需求&#xff0c;多层…...

高效安全的网页资源提取方案:猫抓开源工具的技术实现与专业应用

高效安全的网页资源提取方案&#xff1a;猫抓开源工具的技术实现与专业应用 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字化时代&#xff…...

2024年DroidKaigi官方会议应用:Android DataStore轻量级数据存储终极指南

2024年DroidKaigi官方会议应用&#xff1a;Android DataStore轻量级数据存储终极指南 【免费下载链接】conference-app-2024 The Official Conference App for DroidKaigi 2024 项目地址: https://gitcode.com/GitHub_Trending/co/conference-app-2024 DroidKaigi 2024官…...

Phi-4-mini-reasoning效果展示:含单位换算、科学计数法的复合型数学题求解

Phi-4-mini-reasoning效果展示&#xff1a;含单位换算、科学计数法的复合型数学题求解 1. 模型能力概览 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步逻辑推导的问题。与通用聊天模型不同&#xff0c;它更专注于"问题输入→…...

解锁ComfyUI扩展潜能:工作流优化实战指南

解锁ComfyUI扩展潜能&#xff1a;工作流优化实战指南 【免费下载链接】ComfyUI-Custom-Scripts Enhancements & experiments for ComfyUI, mostly focusing on UI features 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Custom-Scripts 在AI绘画创作中&…...

如何高效突破内容付费墙:Bypass Paywalls Clean浏览器扩展深度技术解析

如何高效突破内容付费墙&#xff1a;Bypass Paywalls Clean浏览器扩展深度技术解析 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字内容访问受限的时代&#xff0c;Bypass Payw…...

保姆级教程:用SolidWorks URDF插件把你的机械设计变成Gazebo仿真模型

从SolidWorks到Gazebo&#xff1a;机械设计仿真全流程实战指南 机械工程师们常常面临一个挑战&#xff1a;如何在虚拟环境中快速验证设计方案的可行性&#xff1f;SolidWorks作为主流的三维设计工具&#xff0c;与Gazebo这一强大的机器人仿真平台结合&#xff0c;能够实现从概念…...

实战演练:基于Copaw下载的博客代码,在快马平台上快速构建并部署可访问的全栈应用

今天想和大家分享一个实战经验&#xff1a;如何基于Copaw下载的代码&#xff0c;在InsCode(快马)平台上快速构建并部署一个全栈博客应用。整个过程非常流畅&#xff0c;特别适合想快速验证想法的开发者。 项目背景与需求分析 最近在Copaw上找到一个博客系统的代码骨架&#x…...

攻克Switch 19.0.1系统Atmosphere启动故障:从诊断到优化的完整方案

攻克Switch 19.0.1系统Atmosphere启动故障&#xff1a;从诊断到优化的完整方案 【免费下载链接】Atmosphere Atmosphre is a work-in-progress customized firmware for the Nintendo Switch. 项目地址: https://gitcode.com/GitHub_Trending/at/Atmosphere 在Switch主机…...