element table表格内进行表单验证(简单例子,一看就会,亲测有用~)开箱即用!!

news2024/9/17 8:47:15

效果图:

在这里插入图片描述

代码:

<div> 
			<el-form ref="form" :model="form" >
                        <el-table :data="form.tableData" align="center" border>
                            <el-table-column label="名称">
                                <template slot-scope="scope">
                                    <el-form-item label="" :prop="'tableData.'+scope.$index+'.name'"
                                                  :rules="rules.name" >
                                        <el-input v-model="scope.row.name"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="年龄">
                                <template slot-scope="scope">
                                    <el-form-item label="" :prop="'tableData.'+scope.$index+'.value'"
                                                  :rules="rules.value" >
                                        <el-input v-model="scope.row.value" ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-form>
                <el-button @click="summit">确定</el-button>
	
</div>	


data() {
        return {
            form: {
                tableData: [
                    { name: "", value: "" },
                    { name: "", value: "" },
                ]
            },
            rules: {
                value:{
                    required: true,
                    message: "此项必填",
                    trigger: "blur"
                },
                name:{
                    required: true,
                    message: "此项必填",
                    trigger: "blur"
                }
            },
        }
    },

methods: {
		summit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$message({
                        message: "校验通过",
                        type: "success"
                    });
                }
            });
        },
}

开箱即用!!啊兄弟们~

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

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

相关文章

国标GB28181安防视频云平台EasyCVR出现持续重启现象,是什么问题?该如何解决?

视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能…

边缘计算系统设计与实践

随着科技的飞速发展&#xff0c;物联网和人工智能两大领域的不断突破&#xff0c;我们看到了一种新型的计算模型——边缘计算的崛起。这种计算模型在处理大规模数据、实现实时响应和降低延迟需求方面&#xff0c;展现出了巨大的潜力。本文将深入探讨边缘计算系统的设计原理和实…

MySQL5 和 MySQL8 的配置区别 一些注意事项

1、使用命令行查看MySQL的版本 先保证你的mysql正在运行&#xff0c;假如用户名是root&#xff0c;密码是123456&#xff0c;运行下边的代码可以查看mysql的版本号。 mysql -uroot -p123456这里我的版本是5.7.19。也就是5版本的。 2、不同版本对应的数据库驱动jar包&#x…

【docker 】 安装docker(centOS7)

官网 docker官网 github源码 官网 在CentOS上安装Docker引擎 官网 在Debian上安装Docker引擎 官网 在 Fedora上安装Docker引擎 官网 在ubuntu上安装Docker引擎 官网 在RHEL (s390x)上安装Docker引擎 官网 在SLES上安装Docker引擎 最完善的资料都在官网。 卸载旧版本 …

AOP跨模块捕获异常遭CGLIB拦截而继续向上抛出异常

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、BUG详情 1.1 报错信息 1.2 接口响应信息 1.3 全局异常处理器的定义 二、排查过程 三、解决方案 四、总结 前言 最近&…

【SpringBoot】入门精简

目录 一、初识 SpringBoot 1.1 介绍 1.2 项目创建 1.3 目录结构 1.4 修改配置 二、SpringBoot 集成 2.1 集成 Mybatis框架 2.2 集成 Pagehepler分页插件 2.3 集成 Druid数据库连接池 2.4 集成 Log日志管理 一、初识 SpringBoot 1.1 介绍 Spring Boot是一个用于简化Sp…

无人零售柜:快捷舒适购物体验

无人零售柜&#xff1a;快捷舒适购物体验 通过无人零售柜和人工智能技术&#xff0c;消费者在购物过程中可以自由选择商品&#xff0c;根据个人需求和喜好查询商品清单。这种自主选择的购物环境能够为消费者提供更加舒适和满意的体验。此外&#xff0c;无人零售柜还具有节约时间…

Python手撕kmeans源码

参考了两篇文章 K-Means及K-Means算法Python源码实现-CSDN博客 使用K-means算法进行聚类分析_kmeans聚类分析结果怎么看-CSDN博客 # 定义kmeans类 from copy import deepcopy from sklearn.datasets import make_blobs import numpy as np import matplotlib.pyplot as pltc…

如何充分准备面试,迅速融入团队并在工作中取得卓越成就

首先&#xff0c;关于如何筹备面试&#xff0c;首先需要对所申请公司与职位进行深入的调查了解&#xff0c;并依据可能提出的面试问题预先准备相应的答案&#xff0c;并提前调试面试所需的仪器设备。同时&#xff0c;也要注重自身形象的塑造。更为关键的是 1. 在计算机领域的面…

搭建你的知识付费小程序平台:源码解析与技术实现

知识付费小程序平台在当今数字化时代扮演着越来越重要的角色&#xff0c;为教育者和学习者提供了一个灵活、便捷的学习环境。本文将以关键词“知识付费小程序源码”为基础&#xff0c;探讨如何搭建一个功能强大的知识付费小程序平台&#xff0c;并提供一些基础的技术代码示例。…

串口通信(1)-硬件知识

本文讲解串口通信的硬件知识。让读者快速了解硬件知识&#xff0c;为下一步编写代码做基础。 目录 一、概述 二、串口通信分类 2.1信息的传送方向进行分类 2.2同步通信和异步通信 三、串口协议 3.1 RS232 3.1.1 电气特性 3.1.2 连接器的机械特性 3.1.3 连接类型 3.1…

08.仿简道云公式函数实战-逻辑函数-IF

1. IF函数 IF 函数可用于判断一个条件能否满足&#xff1b;如果满足返回一个值&#xff0c;如果不满足则返回另外一个值。 2. 函数用法 IF(logical_test&#xff0c;value_if_true, value_if_false) 其中各参数的含义如下&#xff1a; logical_test&#xff1a;必需&#…

JVM虚拟机系统性学习-对象存活判断算法、对象引用类型和垃圾清除算法

垃圾回收 在 JVM 中需要对没有被引用的对象&#xff0c;也就是垃圾对象进行垃圾回收 对象存活判断算法 判断对象存活有两种方式&#xff1a;引用计数法、可达性分析算法 引用计数法 引用计数法通过记录每个对象被引用的次数&#xff0c;例如对象 A 被引用 1 次&#xff0c…

被迫搬家,宽带迁移怎么办?

广州一栋违建烂尾楼&#xff0c;13年里从未停止出租&#xff0c;年年住满人。这栋楼没有贴外墙&#xff0c;裸露的水泥表面都被雨水腐蚀&#xff0c;很多阳台没有建好&#xff0c;只是简单加装了护栏&#xff0c;存在巨大安全隐患。 为什么烂尾楼年年满人呢&#xff1f; 因为它…

STL--关联式容器底层实现

关联式容器从底层实现分为两类&#xff1a;①红黑树&#xff1a;set、map、multiset和multimap ②哈希&#xff1a;unordered_set、unordered_map、unordered_multiset和unordered_multimap。 一、红黑树 它是⼀种特殊的⼆叉查找树。红⿊树的每个节点上都有存储位表示节点的颜…

Java入门项目--蚂蚁爱购

简介 这是一个靠谱的Java入门项目实战&#xff0c;名字叫蚂蚁爱购。 从零开发项目&#xff0c;视频加文档&#xff0c;十天就能学会开发JavaWeb项目&#xff0c;教程路线是&#xff1a;搭建环境> 安装软件> 创建项目> 添加依赖和配置> 通过表生成代码> 编写Ja…

vue3项目中使用vue-cropper实现截图效果

前言&#xff1a; 自用&#xff01;&#xff01;&#xff01; 插件文档链接&#xff1a; https://www.npmjs.com/package/vue-cropper 使用步骤&#xff1a; 1、安装 npm install vue-cropper 2、项目中引入&#xff08;全局引入&#xff09;&#xff1b;文档中有介绍如何局…

深度学习——第3章 Python程序设计语言(3.7 matplotlib库)

3.7 matplotlib库 目录 1 matplotlib库简介 2 pyplot的plot函数 3 matplotlib基础绘图函数示例 数据可视化有助于深度理解数据。 本节介绍绘制图形的基本方法。 1. matplotlib库简介 matplotlib官网 1.1 matplotlib库概述 matplotlib是Python优秀的数据可视化第三方库&a…

ChatGPT/GPT4+AI绘图+论文高效写作结合到底有多强大?你可以躺赢了

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

LLM之RAG实战(三):LlamaIndex解锁自定义LLM关键步骤分块、索引、查询介绍

一、LLamaIndex介绍 LLamaIndex是一个由Jerry Liu创建的Python库&#xff0c;它可以使用语言模型对大型文档集进行高效的文本搜索和摘要。开发人员可以使用LLamaIndex快速添加私有/自定义数据&#xff0c;以增强现有的LLM。它不需要对大模型进行再训练&#xff0c;即可提供个性…