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
// ...后续的提交表单逻辑
}

最终效果:

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

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

相关文章

救命!接手了一个老项目,见到了从业10年以来最烂的代码!

后台回复“书籍”&#xff0c;免费领取《程序员书籍资料一份》 后台回复“5000”&#xff0c;免费领取面试技术学习资料一份 在程序员这个行业从业快10年了&#xff0c;每过几个月回头看看自己写的代码&#xff0c;都会觉得写的也太烂了&#xff0c;不敢想象是自己之前写的。…

2024黄河流域比赛的复现

目录 WEB [GKCTF 2021]easynode unser 知识点 WEB 根据此题先复现[GKCTF 2021]easynode这个题&#xff0c;这两个题类似 [GKCTF 2021]easynode 1.打开页面发现是登录页面&#xff0c;找到源文件里面的代码&#xff0c;分析如何进行登录&#xff0c;发现经过safeQuery()函…

【C++】基础复习 运算符|算数、关系、逻辑、赋值、位运算符

文章目录 1 算术运算符1.1 整数除法1.2 浮点数除法1.3 混合运算 2 关系运算符3 逻辑运算符4 赋值运算符5 位运算符6 条件运算符&#xff08;三元运算符&#xff09;7 其他重点补充 1 算术运算符 算术运算符用于执行基本的数学运算。 运算符描述示例结果加法a b两数相加-减法…

2024年6月13日随笔

现在已经是6月14日了&#xff0c;十二点多了&#xff0c;宿舍依旧很吵&#xff0c;根本睡不着&#xff0c;索性下来写篇随笔&#xff0c;已经好久没写过随笔了&#xff0c;最近这两个月都很忙&#xff0c;双学位的考试&#xff0c;两个课程设计&#xff0c;还有其他一些杂七杂八…

Docker使用心得

Docker使用心得 最近使用Docker比较频繁&#xff0c;特此想记录一下&#xff0c;方便后续查找。 Docker常用命令Docker如何配置使用GPU环境&#xff1f;如何使用Dockerfile构建镜像&#xff1f;如何使用docker compose 实例化容器&#xff1f; Docker如何配置使用GPU环境 参…

深度学习 - CNN

第一部分&#xff1a;基础知识 1. 什么是卷积神经网络&#xff08;CNN&#xff09; 定义和基本概念 卷积神经网络&#xff08;CNN&#xff09;是一种专门用于处理具有网格结构数据&#xff08;如图像&#xff09;的深度学习模型。它们在图像识别和计算机视觉领域表现尤为突出…

SX2106B 2A同步降压型DC/DC转换器芯片IC

一般描述 SX2106B是一款同步降压DC/DC转换器&#xff0c;提供宽广的4.5V至24V输入电压范围和2A连续负载电流能力。 SX2106B故障保护包括逐周期电流限制、UVLO、输出过电压保护和热关机。可调软启动功能&#xff0c;防止启动时的浪涌电流。该器件采用电流模式控…

R语言数据分析案例28-对数据集可视化和T检验

一、分析主题&#xff1a; 本分析旨在对数据集进行可视化和 T 检验&#xff0c;以探索数据集中的变量之间的关系和差异。通过可视化数据&#xff0c;我们可以直观地了解数据的分布和趋势&#xff0c;而 T 检验则可以帮助我们确定这些差异是否具有统计学意义。 二、具体分析 …

【字符函数】

接下来介绍部分字符函数测试 2. 字符转换函数 1.字符分类函数 1.1iscntrl 注&#xff1a;任何控制字符 检查是否有控制字符 符合为真 int main() {int i 0;char str[] "first line \n second line \n";//判断是否遇到控制字符while (!iscntrl(str[i])){p…

【Java】多态、final关键字、抽象类、抽象方法

多态(Polymorphism) 【1】多态跟属性无关&#xff0c;多态指的是方法的多态&#xff0c;而不是属性的多态。 【2】案例代入&#xff1a; public class Animal {//父类&#xff1a;动物&#xff1a; public void shout(){ System.out.println("我是小动物&am…

Qt 非圆角图片裁剪为圆角图片

将Qt非圆角图片裁剪为圆角图片,步骤如下&#xff1a; 1、按照原始图片尺寸定义一张透明的新图形 2、使用画家工具在新图形上绘制一个圆角矩形线路 3、绘制图片 4、使用圆角矩形切割图片边角 封装成函数如下&#xff1a; QPixmap Widget::getRoundedPixmap(const QPixmap srcPix…

Opus从入门到精通(四)Opus解码程序实现

Opus从入门到精通(四)Opus解码程序实现 前面我们已经成功将PCM文件编码成Opus,写入文件,接下来我们实现解码. 初始化解码器 解码器创建依赖于编码前数据的采样率,声道数: OpusDecoder *pOpusDec opus_decoder_create(sampleRateInHz, channelConfig, &error); if (err…

Vue引入element-plus-04

我们这次开发是使用vue的脚手架来进行开发,前面我们已经使用过最原生的方式去编写我们的vue的语法,从今天开始就使用vue的脚手架,但是前提是你需要用于node的环境 在我们开始之前&#xff0c;我们至少需要有node npm是什么&#xff1f; npm是一个强大的包管理工具&#xff0c;它…

LeetCode: 2779. 数组的最大美丽值

题目 给你一个下标从 0 开始的整数数组 nums 和一个 非负 整数 k 。 在一步操作中&#xff0c;你可以执行下述指令&#xff1a; 在范围 [0, nums.length - 1] 中选择一个 此前没有选过 的下标 i 。 将 nums[i] 替换为范围 [nums[i] - k, nums[i] k] 内的任一整数。 数组的 …

Halcon 多相机统一坐标系

小杨说事-基于Halcon的多相机坐标系统一原理个人理解_多相机标定统一坐标系-CSDN博客 一、概述 最近在搞多相机标定等的相关问题&#xff0c;对于很大的场景&#xff0c;单个相机的视野是不够的&#xff0c;就必须要统一到一个坐标系下&#xff0c;因此我也用了4个相机&#…

人工智能ChatGPT的多种应用:提示词工程

简介 ChatGPT 的主要优点之一是它能够理解和响应自然语言输入。在日常生活中&#xff0c;沟通本来就是很重要的一门课程&#xff0c;沟通的过程中表达的越清晰&#xff0c;给到的信息越多&#xff0c;那么沟通就越顺畅。 和 ChatGPT 沟通也是同样的道理&#xff0c;如果想要 …

推荐系统三十六式学习笔记:原理篇.矩阵分解10|那些在Netflix Prize中大放异彩的推荐算法

目录 缘起矩阵分解为什么要矩阵分解1 基础的SVD算法2 增加偏置信息3 增加历史行为4 考虑时间因素 总结 我们先前聊过推荐系统中的经典问题&#xff0c;其中有一类就是评分预测。平心而论&#xff0c;评分预测问题只是很典型&#xff0c;其实并不大众。毕竟在实际的应用中&#…

最新情侣飞行棋高阶羞羞版,解锁私密版情侣小游戏,文末有福利!

今天要跟大家聊聊一种特别有意思的游戏——情侣飞行棋羞羞版。别急着脸红&#xff0c;这可是专为情侣设计的游戏&#xff0c;让你们在轻松愉快的氛围中&#xff0c;增进了解&#xff0c;加深感情。 谈恋爱&#xff0c;不就是两个人在一起&#xff0c;做些有趣的事情吗&#xf…

java程序监控linux服务器硬件,cpu、mem、disk等

实现 使用Oshi和Hutool工具包1、pom依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId>&l…

Opus从入门到精通(七)Opus编码基础之认识声音

Opus从入门到精通(七)Opus编码基础之认识声音 前面我们分析完Opus的编解码api使用,封装原理等,接下来我们准备分析Opus编码原理.Opus编码是一个复杂的工作,我们需要做一些基本铺垫,包括认识声音,压缩编码基础. 认识音频有助于我们了解音频特征,不仅对语音有助于我们理解编码技…