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.hqwc.cn/news/447816.html

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

相关文章

Open CASCADE学习|曲面上一点的曲率及切平面

曲率&#xff08;Curvature&#xff09;是一个几何学的概念&#xff0c;用于描述一个物体的形状在某一点上的弯曲程度。在我们日常生活中&#xff0c;曲率与我们的生活息息相关&#xff0c;如道路的弯道、建筑物的拱形结构、自然界的山脉等等。了解曲率的概念和计算方法&#x…

六、CPU性能参数介绍

一般买电脑前&#xff0c;怎么看CPU性能&#xff0c;我们打开搜索某一款电脑&#xff0c;关于这个电脑cpu的介绍如下 看CPU的性能信息&#xff0c;看这里&#xff0c;我的电脑-->属性 看CPU的个数&#xff0c;可以在我的电脑--&#xff1e;右键--&#xff1e;管理--&#xf…

0202-1-处理机调度与死锁

第三章:处理机调度与死锁 处理机调度算法的目标 处理机调度算法的共同目标 资源利用率:CPU的利用率CPU有效工作时间/(CPU有效工作时间CPU空闲等待时间)公平性平衡性策略强制执行 批处理系统的目标 平均周转时间短系统吞吐量高处理机利用率高 分时系统的目标 响应时间快均…

ADB+Monkey

文章目录 ADB用途介绍工作原理常见adb命令安装应用卸载应用将文件复制到设备/从设备复制文件设置端口转发adb logcatadb shell MonkeyMonkey介绍Monkey路径Monkey启动Monkey基本参数与事件参数Monkey基本参数设置Monkey测试的约束条件Monkey发送的事件类型和频率 Monkey调试参数…

YOLOv8改进芒果首发:24年最新论文Shift-ConvNets:稀疏/移位操作让小卷积核也能达到大卷积核效果,来打造新颖YOLOv8检测器

💡本篇内容:YOLOv8改进芒果首发:24年最新论文Shift-ConvNets:稀疏/移位操作让小卷积核也能达到大卷积核效果,来打造新颖YOLOv8检测器 💡附改进源代码及教程,用来改进作为 🚀改进Shift-ConvNets 24年最新论文 Shift-ConvNets地址:https://arxiv.org/abs/2401.1273…

图片热区功能

一、需求描述及效果图 1.需求描述&#xff1a; 根据后端返回的坐标及人员信息&#xff0c;在图片上的相应位置添加图片热区功能&#xff0c;点击可展示出对应的人员信息。 图片可进行缩放 2.示例&#xff1a; &#xff08;定位是随便写的&#xff0c;仅做示例&#xff09; …

Nginx 多项目部署,vue刷新404 解决方案

网上找的资料大多都解决不了&#xff0c;废话不多说直接告诉你解决方法。 环境是 TP6 VUE前端官网 VUE 后台管理 部署 两个项目 刷新 404 解决方案 Nginx 配置 直接贴图 如果解决了&#xff0c;给我顶起来&#xff0c;让更多人 快速的解决。

SpringBoot security 安全认证(一)——登录验证

本节内容&#xff1a;使用springboot自动security模块实现用户登录验证功能&#xff1b; 登录过程如下图&#xff1a; AuthenticationManager内容实现用户账号密码验证&#xff0c;还可以对用户状态&#xff08;启用/禁用&#xff09;&#xff0c;逻辑删除&#xff0c;账号是否…

Vue3_基础使用_1

这节主要介绍&#xff1a; vue2与vue3的区别&#xff0c;创建响应式的数据&#xff0c;setup语法糖的使用&#xff0c;watch监听&#xff0c;及vue3创建项目。 vue2的选项式与vue3的组合式区别&#xff1a; 选项式&#xff1a;vue2中数据与方法计算属性等等&#xff0c;针对…

单元测试框架深入(一):单元测试框架深入

一、一个简单的例子 1、引入Maven依赖&#xff1a;JUnit框架和Surefire插件 2.在src/test/java目录下新建名字以“Test”结尾的测试类&#xff0c;并用Test注释测试方法 3.运行单元测试用例 或用mvn命令运行单元测试&#xff1a; 二、单元测试基础之单元测试框架&#xff1a;J…

PKG系统安装包及IPSW固件:MacOS 11-14 Sonoma 正式版

MacOS 14 Sonoma&#xff0c;为提高生产力和创造力带来了全新的功能&#xff0c;有了更多使用小部件和令人惊叹的新屏幕保护程序进行个性化设置的方法&#xff0c;对Safari浏览器和视频会议进行了重大更新&#xff0c;以及优化的游戏体验——Mac体验比以往任何时候都更好。 mac…

Docker进阶篇-DockerFile

一、简介 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚 本。 构建步骤&#xff1a; 1、编写Dockerfile文件 2、docker build命令构建镜像 3、docker run依镜像运行容器实例 二、Docker构建过程解析 1、Dockerfile…