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,一经查实,立即删除!

相关文章

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

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

从[redis:LinkedList]中学习链表

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

简单说说mysql的日志

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

网站接入QQ登录

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

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

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

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

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

代码随想录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] # 设置为一个支持…

C#,斯特林数(Stirling Number)的算法与源代码

1 斯特林数 在组合数学&#xff0c;斯特林数可指两类数&#xff0c;第一类斯特林数和第二类斯特林数&#xff0c;都是由18世纪数学家James Stirling提出的。它们自18世纪以来一直吸引许多数学家的兴趣&#xff0c;如欧拉、柯西、西尔沃斯特和凯莱等。后来哥本哈根&#xff08;…

Docker容器引擎私有仓库的搭建和管理

目录 一、私有仓库搭建和管理 &#xff08;一&#xff09;搭建本地私有仓库 1.拉取registry镜像 2.修改docker配置文件并重启 3.运行registry容器 4.给镜像打标签 5.上传到私有仓库 6.查看私有仓库的所有镜像 7.从私有仓库拉取镜像 &#xff08;1&#xff09;删除cen…

网络协议 UDP协议

网络协议 UDP协议 在之前的文章中有对UDP协议套接字的使用进行讲解&#xff0c;本文主要对UDP协议进行一些理论补充。 文章目录 网络协议 UDP协议1. 概念2. UDP协议格式2.1 数据报长度2.2 校验和/检验和2.2.1 CRC校验2.2.2 MD5算法 1. 概念 UDP&#xff0c;即User Datagram P…

gitlab操作手册

git操作篇 1. 项目克隆 git clone gitgitlab.test.cn:pro/project1.git2. 项目的提交 注&#xff1a;如果要查看文件的状态可以用git status命令&#xff1a; 如上图所示&#xff0c;文件已经修改了。 3. 项目的推送 git push origin feature/test01注&#xff1a;如果要查…

nodejs+vue+ElementUi宠物领养救助网站0w6wc

宠物领养救助平台采用B/S架构&#xff0c;数据库是MySQL。网站的搭建与开发采用了先进的nodejs进行编写&#xff0c;使用了vue框架。该系统从两个对象&#xff1a;由管理员和用户来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;对用户、宠物类别、宠物…

深信服技术认证“SCSA-S”划重点:安全事件管理处置

为帮助大家更加系统化地学习网络安全知识&#xff0c;以及更高效地通过深信服安全服务认证工程师考核&#xff0c;深信服特别推出“SCSA-S认证备考秘笈”共十期内容&#xff0c;“考试重点”内容框架&#xff0c;帮助大家快速get重点知识~ 划重点来啦 *点击图片放大展示 深信…

MySQL-运维-主从复制

一、概述 二、原理 三、搭建 1、服务器准备 2、主库配置 &#xff08;1&#xff09;、修改配置文件/etc/my.cnf &#xff08;2&#xff09;、重启MySQL服务器 &#xff08;3&#xff09;、登录mysql&#xff0c;创建远程链接的账号&#xff0c;并授予主从复制权限 &#xff0…

shell脚本-免交互

一、Here Document免交互&#xff1a; 1.交互概述&#xff1a; 交互&#xff1a;当计算机播放某多媒体程序的时候&#xff0c;编程人员可以发出指令控制该程序的运行&#xff0c;而不是程序单方面执行下去&#xff0c;程序在接受到编程人员相应的指令后而相应地做出反应。 对于…

铁轨语义分割(Unet结合resnet系列)

数据介绍 一类是图片&#xff0c;一类是图像标签。 引入库&#xff0c;处理数据 import torch.nn as nn import torch import torch.nn.functional as F import os from PIL import Image import torch from torch.utils.data import Dataset import torchvision.transfor…