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

以下.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.mzph.cn/news/661513.shtml

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

相关文章

软件工程知识梳理1-可行性研究

目的&#xff1a;确定问题是否值得去解决。就是用最小的代价在尽可能短的时间内确定问题是否能够解决。 可行性研究实质上是要进行一次大大压缩简化了的系统分析和设计的过程&#xff0c;也即是在较高层次上以较抽象的方式进行系统分析和设计的过程。 考察点&#xff1a;技术可…

0基础学习VR全景平台篇第140篇:摄影器材保养与维护

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 摄影器材属于精密仪器&#xff0c;在使用过程中会磨损、老化、积灰。如果不对摄影器材进行清洁和保养&#xff0c;油污、灰尘、水渍长期停留在设备上&#xff0c;不仅会大大缩短相机…

如何利用Laravel实现验证码功能

1、生成验证码图片 在Laravel中&#xff0c;生成验证码图片的方式通常是使用PHP的GD库。GD库是一种非常流行的PHP图像处理库&#xff0c;提供了很多方便的函数&#xff0c;可以轻松地生成各种类型的图像。在Laravel中&#xff0c;我们可以使用GD库的函数来实现验证码图片的生成…

从[redis:LinkedList]中学习链表

文章目录 adlistlistNodelistmacros[宏定义]listCreatelistInitNodelistEmptylistReleaselistAddNodeHeadlistLinkNodeHeadlistAddNodeTaillistLinkNodeTaillistInsertNodelistDelNodelistUlinkNodelistIndexredis3.2.100quicklistredis7.2.2quicklist redis的基本数据类型之一…

简单说说mysql的日志

今天我们通过mysql日志了解mysqld的错误日志、慢查询日志、二进制日志&#xff0c;redolog, undolog等。揭示它们的作用和用途&#xff0c;让我们工作中更能驾驭mysql。 redo 日志 如果mysql事务提交后发生了宕机现象&#xff0c;那怎么保证数据的持久性与完整性&#xff1f;…

MYSQL 创建用户以及解决MYSQL新建数据库看不到相关数据库信息的解决方案

MYSQL 创建用户以及解决MYSQL新建数据库看不到相关数据库信息的解决方案 首先 我们创建一个mysql用户账户 如创建一个test用户 密码123456 命令如下&#xff1a; CREATE USER testlocalhost IDENTIFIED BY 123456;创建了一个db1的数据库 命令如下&#xff1a; create databa…

达梦数据库死锁排查与解决

在达梦数据库系统中&#xff0c;死锁是指两个或多个事务相互等待对方释放资源&#xff0c;从而造成循环等待的现象&#xff0c;严重影响数据库的正常运行。以下是使用达梦数据库进行死锁排查和解决的具体步骤&#xff1a; 死锁查看 查询当前死锁信息 SELECT lc.lmode, lc.ta…

网站接入QQ登录

开发者认证&#xff0c;创建应用&#xff1a; &#xff08;1&#xff09;先在 QQ 互联 QQ互联管理中心 进行个人开发者认证&#xff0c;并审核 &#xff08;2&#xff09;创建【网站应用】&#xff0c;填写正确信息&#xff0c;获得对应的 appid 与 appkey&#xff0c;并审核…

Java学习笔记2024/2/1

1. 循环高级 1.1 无限循环 package com.angus.loopAdvanced.infiniteLoop_1;public class note {public static void main(String[] args) {//无限循环:循环一直停不下来//for循环//while循环 ->最常用,因为不知道循环的范围或者次数//do...while循环// for (;;){ …

【机器学习】某闯关类手游用户流失预测

Final Project: 某闯关类手游用户流失预测 1 案例简介 手游在当下的日常娱乐中占据着主导性地位&#xff0c;成为人们生活中放松身心的一种有效途径。近年来&#xff0c;各种类型的手游&#xff0c;尤其是闯关类的休闲手游&#xff0c;由于其对碎片化时间的利用取得了非常广泛…

分组函数应用(sql+python)总结

经常会遇见对某个字段进行分组、统计等&#xff0c;其中还包括一些比较细致的问题&#xff0c;有时往往会忘记&#xff0c;这里做个记录。 文章目录 1. sql的分组&#xff08;group by/ over()&#xff09;2. PYTHON分组函数使用groupby 1. sql的分组&#xff08;group by/ ov…

服务器未启动而端口进程仍在运行如何查看并杀死

首先登录服务器然后查看当前监听的端口&#xff1a; sudo netstat -tuln比如这里的8080&#xff0c;我们此时并未启动服务器&#xff0c;但是它却正在运行&#xff0c;这会导致服务器刚启动就秒挂。如果没有日志的话会让人有点疑惑&#xff0c;这种情况可能是之前运行了该进程…

openssl3.2 - 官方demo学习 - pkcs12 - pkread.c

文章目录 openssl3.2 - 官方demo学习 - pkcs12 - pkread.c概述笔记END openssl3.2 - 官方demo学习 - pkcs12 - pkread.c 概述 openssl3.2 - 官方demo学习 - 索引贴 将官方demos的pkread.c 过了一下. 只要有正确的.P12证书和导出口令, 这个实验做起来很快. 程序功能, 读.P12文…

网络编程练习题(TCP)

基础练习 package test1;import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.net.ServerSocket; import java.net.Socket;public class Server {public static void main(String[] args) throws IOException {ServerSoc…

代码随想录day17--二叉树的应用5

LeetCode654.最大二叉树 题目描述&#xff1a; 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后…

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件 鸿蒙开发-UI-组件2 鸿蒙开发-UI-组件3 鸿蒙开发-UI-气泡/菜单 文章目录 一、基本概念 二、页面跳转 1.router基本概念 2.使用场景 3.页面跳转参数传递 三、页面返回 1.普通页面返回 2.页面返回前增加一个询问框 1.系统默认询问框 2.自定义询问框 总…

EtherCAT FP介绍系列文章—UDP gateway

EtherCAT主站上的Mailbox Gateway功能&#xff0c;可以用于将EtherCAT mailbox相关协议从外部设备的工具通过邮箱网关路由到EtherCAT从站设备。在EtherCAT规范中定义的所有邮箱协议在此功能中都可用&#xff0c;例如CoE, FoE, VoE, SoE。 但是&#xff0c;这里特别注意的是Mai…

雨云游戏云VPS服务器用Linux搭建MCSM面板和Minecraft Mohist 1.20.2服务器教程,我的世界MOD和插件服开服教程。

雨云游戏云VPS服务器用Linux搭建MCSM面板和Minecraft Mohist 1.20.2服务器教程&#xff0c;我的世界MOD和插件服开服教程。 本教程演示安装的MC服是Mohist 1.20.2版&#xff0c;其他版本也可以参考本教程&#xff0c;差别不大。 本教程使用Docker来运行mc服&#xff0c;可以方…

UserWarning: Glyph 39640 missing from current font问题

是因为不支持中文字体导致的&#xff0c;设置为一个支持中文的字体就行了。 另外&#xff0c;上面的改动会引起负号显示为方块&#xff0c;需要额外再加一条设置。 在中文系统上 import matplotlib.pyplot as plt plt.rcParams[font.sans-serif] [SimHei] # 设置为一个支持…

【leetcode刷刷】39. 组合总和、40.组合总和II、131.分割回文串

39. 组合总和 一开始写的时候没注意到可以重复&#xff0c;注意到可以重复之后就去掉了start_index&#xff0c;但是出现了类似[2,2,3][2,3,2]这种重复。看了题解之后&#xff0c;发现加上start_index&#xff0c;但是进for循环的时候start_index还是i&#xff0c;这样就是既可…