element表格内多个输入框时如何添加表单校验

news2024/10/6 0:29:31

以下.vue文件Demo可直接复制运行:

重点:
1:表格数据定义在form里
2:prop需要加索引;索引前的变量不要加form,直接取里边的key,索引后的字段需要和表格里字段属性对应 。:prop="'tableInfo.list.' + scope.$index + '.name'"

<template>
	<el-form ref="form" :model="form">
		<el-table :data="form.tableInfo.list" border>
			<el-table-column align="center" prop="name" label="姓名">
				<template slot-scope="scope">
					<el-form-item :prop="'tableInfo.list.' + scope.$index + '.name'" :rules="ruleForm.name">
						<el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
				</template>
			</el-table-column> 
			<el-table-column align="center" prop="age" label="年纪">
				<template slot-scope="scope">
					<el-form-item :prop="'tableInfo.list.' + scope.$index + '.age'" :rules="ruleForm.age">
						<el-input-number placeholder="请输入年纪" v-model="scope.row.age" controls-position="right" :min="1"></el-input-number>
					</el-form-item>
				</template>
			</el-table-column>
		</el-table>
		<el-button @click="handleSubmit()" type="button">提交</el-button>
	</el-form>
</template>

<script>
	export default {
	    components: {},
	    data() {
	      return {
			  form:{
				  tableInfo:{
					  list:[{
						  name:"",
						  age:""
					  },{
						  name:"",
						  age:""
					  }]
				  }
			  },
			  rules:{},
			  ruleForm:{
				  name: [
					  { required: true, message: '请输入姓名', trigger: 'blur' },
				  ],
				  age: [
					  { required: true, message: '请选择年龄', trigger: 'blur' },
				  ],
			  }
		  }
		},
		methods:{
			handleSubmit(){
				let form = this.form;
				this.$refs['form'].validate((valid) => {
					if (valid) {
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>

寄语:

人的成熟,是一个从迷茫到自知、从自知到坚定的过程。
在这个过程中,每个人都要慢慢学会扛起自己的责任,学会独自面对生活中的风风雨雨。
所谓成熟,不是年龄长了就叫成熟;而是成长了,能自己去扛事,那才是真正的成熟。

在这里插入图片描述


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

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

相关文章

华为数通方向HCIP-DataCom H12-821题库(单选题:381-400)

第381题 以下是某台设备通过display isis lsdb命令输出的信息,那么关于以上输出的信息的描述,正确的是哪一项? <R1>display isis lsdbDatabase information for ISIS(1)--------------------------------Level-1 Link State DatabaseLSPID Seq Num…

【Linux】环境基础开发工具的使用之gcc详解(二)

前言&#xff1a;上一篇文章中我们讲解了Linux下的vim和yum的工具的使用&#xff0c;今天我们将在上一次的基础上进一步的讲解开放工具的时候。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:Linux的深度刨析 &#x1f448; &#x1f4a…

[Python] 什么是逻辑回归模型?使用scikit-learn中的LogisticRegression来解决乳腺癌数据集上的二分类问题

什么是线性回归和逻辑回归&#xff1f; 线性回归是一种用于解决回归问题的统计模型。它通过建立自变量&#xff08;或特征&#xff09;与因变量之间的线性关系来预测连续数值的输出。线性回归的目标是找到一条直线&#xff08;或超平面&#xff09;&#xff0c;使得预测值与观…

WhisperFusion:与 AI 无缝语音对话(超低延迟),深入理解用户每句话背后的含义

演示视频里面&#xff0c;那老哥问它问题之后&#xff0c;后面更改问题&#xff0c;依然能很好的记录问题变化的过程并给出答案。 WhisperFusion 是基于 WhisperLive 和 WhisperSpeech 的强大工具&#xff0c;将声音转文字和文字理解融为一体&#xff0c;让你与AI机器人无缝语…

Linux-----文本三剑客补充~

一、模糊匹配 模糊匹配用 ~ 表示包含&#xff0c;!~表示不包含 1、匹配含有root的列 [rootlocalhost ~]#awk -F: /root/ /etc/passwd root:x:0:0:root:/root:/bin/bash operator:x:11:0:operator:/root:/sbin/nologin [rootlocalhost ~]#awk -F: $1~ /root/ /etc/passw…

网工内推 | 港企、合资公司,厂商认证优先,五险一金

01 九龙仓&#xff08;长沙&#xff09;置业有限公司 招聘岗位&#xff1a;IT网络工程师 职责描述&#xff1a; 1.负责公司网络架构规划设计、设备选型、远程组网方案的规划和设计&#xff1b; 2.负责公司网络IP地址规划管理&#xff0c;根据业务需求和公司状况&#xff0c;对…

将有逻辑关系的树形结构数组转换为扁平化的一维对象数组(包含PID、ID父子关系)(tree转换为List)

// 将有逻辑关系的树形结构数组转换为扁平化的一维对象数组 treeStructure2flatArray(arr) {let r [], r_ (ar, PID root) > ar.forEach(v > (v.children && (r_(v.children, v.ID), delete v.children), (v.PID PID, r.push(v))));r_(JSON.parse(JSON.strin…

由数据插入超长引起的问题——了解GaussDB和openGauss的字符集

前言 故事是这样开始的。我们的小DEMO项目的数据库版本从openGauss 2.1.0升级到了5.0.0版本。升级后进行功能验证的时候&#xff0c;测试同学发现个BUG&#xff0c;原来通过gs_restore导出来的数据再导入时报超长&#xff0c;插入失败了&#xff0c;如下图所示&#xff0c;nva…

VisionMaster图像拼接功能实现

由于硬件或安装环境限制&#xff0c;单个相机视野无法覆盖整个视野&#xff0c;但实际应用需要全视野图像时&#xff0c;可以拍摄物体的多个部分拼接成一张整图。VM提供图像拼接工具对图像进行拼接。 使用标定图进行标定建模是最重要的一步&#xff0c;成功标定后可以将图像无…

Cocos XR的WebBox实现流程

1. 正常3D场景下的webview 1.1 组件角色 Cocos Creator正常3D场景下只有在UI组件才支持webview&#xff0c;即作为下图中的UI Nodes(Canvas Node)的子节点&#xff0c;和3D组件是隔离开的&#xff0c;不能显示在3D空间中&#xff0c;UI Nodes(Canvas Node)是一个平面内的矩形…

新旧Mac恢复出厂设置的方法不同,这里提供新旧Mac不同的重置方法

在某些使用macOS 12 Monterey或更高版本系统的Mac电脑上,你可以使用系统首选项中的内置功能“擦除助手”轻松擦除和重置计算机。以下是操作方法。 要求(以及旧款Mac的提示) 从2021年发布的macOs Monterey(macOs 12)开始,系统首选项现在有一个类似于iPhone和iPad上的“擦…

TraceRoute 跟踪路由工具

随着企业网络需求的不断增长&#xff0c;组织发现监控和管理其网络基础设施变得越来越困难&#xff0c;网络管理员正在转向其他工具和资源&#xff0c;这些工具和资源可以使他们的工作更轻松一些&#xff0c;尤其是在故障排除方面。 目前&#xff0c;网络管理员主要使用简单、…

【日常聊聊】开源软件影响力

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;开源软件如何推动技术创新 方向二&#xff1a;开源软件的商业模式 方向三&#xff1a;开源软件的安全风险 方…

单机搭建hadoop环境(包括hdfs、yarn、hive)

单机可以搭建伪分布式hadoop环境&#xff0c;用来测试和开发使用&#xff0c;hadoop包括&#xff1a; hdfs服务器 yarn服务器&#xff0c;yarn的前提是hdfs服务器&#xff0c; 在前面两个的基础上&#xff0c;课可以搭建hive服务器&#xff0c;不过hive不属于hadoop的必须部…

某通用引发供应链的思考

本文由掌控安全学院 - 江月 投稿 前言 前段时间看到很多人在打某通用系统&#xff0c;简单记录一下思路。 某通用单位系&#xff1a;xxx奕科技公司 产品如下&#xff1a; 资产还不少&#xff0c;记住这个容器服务平台 等下还要考&#xff0c;以及这个事务中心 可强行接管统一…

QButtonGroup使用介绍

一、简介 QButtonGroup是PyQt5库中的一个组件&#xff0c;主要用于组织和管理一组按钮。通过QButtonGroup&#xff0c;可以方便地实现单选框或多选框功能&#xff0c;统一处理按钮的信号&#xff0c;并且可以为按钮分组设定ID以进行识别。 1、原始工程 from PyQt5.Qt import …

-运算符-

目录 一.算术运算符 (一).四则运算符:加减乘除模(-*/%) (二).增量运算符 - * % (三).自增/自减运算符 -- 二.关系运算符 ! < > < > 三.逻辑运算符&& || ! (一).逻辑与 (表达式1&&表达式2) (二).逻辑或 || (三).逻辑非 ! (四).…

JMeter 下载、安装、启动

JMeter安装部署依赖Java环境&#xff0c;所以首先得安装JDK。 JDK下载JDK环境变量配置 ① 新建系统环境变量JAVA_HOME ② 编辑系统变量Path ③ 新建系统变量CLASSPATH变量 JMeter下载安装 Apache JMeter - Apache JMeter™ JMeter安装部署依赖Java环境&#xff0c;所以首…

Framework - ActivityThread 应用启动UI渲染流程

一、概念 ActivityThread拥有 main(String[] agrs) 方法&#xff0c;作为程序的入口&#xff0c;是应用程序的初始化类。&#xff08;ActivityThread不是主线程&#xff0c;它在 main() 方法中实例化&#xff0c;是运行在主线程中。&#xff09;ApplicationThread是 ActivityT…

Docker搭建MySQL8主从复制

之前文章我们了解了面试官&#xff1a;说一说Binlog是怎么实现的&#xff0c;这里我们用Docker搭建主从复制环境。 docker安装主从MySQL 这里我们使用MySQL8.0.32版本&#xff1a; 主库配置 master.cnf //基础配置 [client] port3306 socket/var/run/mysqld/mysql.sock [m…