当前位置: 首页 > news >正文

【Element】el-form和el-table嵌套实现表格编辑并提交表单校验

一、背景

页面需要用到表格采集用户数据,提交时进行表单校验;即表格中嵌套着表单,保存时进行表单校验

二、功能实现

2.1、el-form和el-table嵌套说明

:model="formData" 给表单绑定数据,formData是表单的数据对象

② 表单数据对象formData中定义的tableData是表单内嵌套的表格显示数据

rules为表单绑定的校验规则

:prop="'tableData.' + scope.$index + '.name'" 绑定传入Form 组件的 model 中对应的字段name

⑤ :rules="rules.name" 绑定表单校验规则

⑥ 整个html结构是一个大表单 el-form里边嵌套的el-table,而el-table中又嵌套了表单项 el-form-item支持编辑。

备注:大多情况下prop会按照惯有思维直接写入字段,而这里是动态绑定的,另外一定要记得每项动态写入rules来进行绑定表单校验 

2.2、具体代码

<template><div><el-form:model="formData"ref="formRef":rules="rules"label-width="108px":inline="true"><el-table:data="formData.tableData"style="width: 100%" border><el-table-column type="index" width="55" align="center"></el-table-column><el-table-column label="姓名" prop="name" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.name"><el-input type="text" size="small" placeholder="请输入姓名" v-model="scope.row.name"></el-input></el-form-item></template></el-table-column><el-table-column label="年龄" prop="age" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.age'" :rules="rules.age"><el-input type="text" size="small" placeholder="请输入年龄" v-model="scope.row.age"></el-input></el-form-item></template></el-table-column><el-table-column label="性别" prop="sex" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.sex'" :rules="rules.sex"><el-input type="text" size="small" placeholder="请输入性别" v-model="scope.row.sex"></el-input></el-form-item></template></el-table-column></el-table><el-form-item class="footer"><el-button type="primary" @click="save">保存</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template><script>
export default{data(){return{formData:{tableData:[{name:'张三',age:18,sex:''},{name:'李四',age:19,sex:''},]},rules:{name:[{ required: true, message: '请输入姓名', trigger: 'blur' },],age:[{ required: true, message: '请输入年龄', trigger: 'blur' },],sex:[{ required: true, message: '请输入性别', trigger: 'blur' },],}}},methods:{//保存save(){this.$refs.formRef.validate((valid) => {console.log('valid',valid);if(valid){//如果valid为true,表示校验通过,可以提交表单,调取接口进行保存console.log('表单校验通过');}else {this.$message.warning("请填写完整的数据");}})},}
}
</script><style lang="scss" scoped>
.footer{margin-top: 50px;
}
</style>

三、实际项目应用

3.1、增加添加与删除操作

需求:表格增加操作项,具有添加和删除按钮,第一项无法删除,点击添加时,动态增加表格的行数,点击删除的时候,删除表格的行数据。

3.2、添加和删除代码

结构:直接添加一个表格项

<el-table-column label="操作" resizable align="center" header-align="center"><template slot-scope="{$index}"><el-button type="primary" icon="el-icon-plus" circle @click="addTable()" v-if="$index == 0"></el-button><el-button icon="el-icon-minus" circle @click="delTable($index)" v-if="$index > 0"></el-button></template>
</el-table-column>
methods:{//添加addTable(){let newArr = [{name:'',age:'',sex:''}]this.formData.tableData.push(...newArr)},//删除delTable(i){this.formData.tableData.splice(i,1)}
}

3.3、完整代码

<template><div><el-form:model="formData"ref="formRef":rules="rules"label-width="108px":inline="true"><el-table:data="formData.tableData"style="width: 100%" border><el-table-column type="index" width="55" align="center"></el-table-column><el-table-column label="姓名" prop="name" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.name"><el-input type="text" size="small" placeholder="请输入姓名" v-model="scope.row.name"></el-input></el-form-item></template></el-table-column><el-table-column label="年龄" prop="age" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.age'" :rules="rules.age"><el-input type="text" size="small" placeholder="请输入年龄" v-model="scope.row.age"></el-input></el-form-item></template></el-table-column><el-table-column label="性别" prop="sex" resizable align="center" header-align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.sex'" :rules="rules.sex"><el-input type="text" size="small" placeholder="请输入性别" v-model="scope.row.sex"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" resizable align="center" header-align="center"><template slot-scope="{$index}"><el-button type="primary" icon="el-icon-plus" circle @click="addTable()" v-if="$index == 0"></el-button><el-button icon="el-icon-minus" circle @click="delTable($index)" v-if="$index > 0"></el-button></template></el-table-column></el-table><el-form-item class="footer"><el-button type="primary" @click="save">保存</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template><script>
export default{data(){return{formData:{tableData:[{name:'张三',age:18,sex:'男'},{name:'李四',age:19,sex:''},]},rules:{name:[{ required: true, message: '请输入姓名', trigger: 'blur' },],age:[{ required: true, message: '请输入年龄', trigger: 'blur' },],sex:[{ required: true, message: '请输入性别', trigger: 'blur' },],}}},methods:{//保存save(){this.$refs.formRef.validate((valid) => {console.log('valid',valid);if(valid){//如果valid为true,表示校验通过,可以提交表单,调取接口进行保存console.log('表单校验通过');}else {this.$message.warning("请填写完整的数据");}})},//添加addTable(){let newArr = [{name:'',age:'',sex:''}]this.formData.tableData.push(...newArr)},//删除delTable(i){this.formData.tableData.splice(i,1)}}
}
</script><style>
.footer{margin-top: 50px;
}
</style>

3.4、实际效果

 最后:👏👏 😀😀😀 👍👍  

相关文章:

【Element】el-form和el-table嵌套实现表格编辑并提交表单校验

一、背景 页面需要用到表格采集用户数据&#xff0c;提交时进行表单校验&#xff1b;即表格中嵌套着表单&#xff0c;保存时进行表单校验 二、功能实现 2.1、el-form和el-table嵌套说明 ① :model"formData" 给表单绑定数据&#xff0c;formData是表单的数据对象 …...

初识Winform

什么是winform&#xff1f; WinForms&#xff08;Windows Forms&#xff09;是Microsoft .NET框架中的一个用户界面&#xff08;UI&#xff09;技术&#xff0c;用于创建Windows应用程序。它提供了一组用于构建图形用户界面的类和控件&#xff0c;以及与用户交互的事件模型。 …...

Redis:原理速成+项目实战——Redis实战5(互斥锁、逻辑过期解决缓存击穿问题)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战4&#xff08;解决Redis缓存穿透、雪崩、击穿&#xff09; &#x1f4da;订阅专…...

前端优化之一:dns预获取 dns-prefetch 提升页面载入速度

问题&#xff1a;怎么做到dns域解析&#xff1f; 用于优化网站页面的图片 问题&#xff1a;怎么提升网站性能&#xff1f; dns域解析&#xff0c;是提升网站的一个办法。 DNS Prefetch&#xff0c;即DNS预获取&#xff0c;是前端优化的一部分。 一般来说&#xff0c;在前端…...

C语言中一些基本数据类型的典型大小

char&#xff1a;通常是1字节。表示一个字符。int&#xff1a;通常在现代系统中是4字节&#xff08;但这取决于编译器和架构&#xff0c;有时可能是2字节&#xff09;。float&#xff1a;通常是4字节。double&#xff1a;通常是8字节。short 和 short int&#xff1a;通常是2字…...

[C/C++]排序算法 快速排序 (递归与非递归)

目录 &#x1f6a9;概念: &#x1f6a9;实现: ⚡1.hoare ⚡2.挖坑法 ⚡3.双指针法 &#x1f6a9;快速排序递归实现 &#x1f6a9;快速排序非递归实现 &#x1f6a9;概念: 通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据比另一部分的所有…...

『年度总结』逐梦编程之始:我的2023学习回顾与展望

目录 前言 我与Python 我与C语言 第一篇正式博客&#xff1a; 第二篇正式博客&#xff08;扫雷&#xff09;&#xff1a; 指针学习笔记: C语言学习笔记&#xff1a; 我与数据结构&#xff1a; yuan 这篇博客&#xff0c;我将回顾2023年编程之旅的起点&#xff0c;同时展…...

MyBatis学习二:Mapper代理开发、配置文件完成增删改查、注解开发

前言 公司要求没办法&#xff0c;前端也要了解一下后端知识&#xff0c;这里记录一下自己的学习 学习教程&#xff1a;黑马mybatis教程全套视频教程&#xff0c;2天Mybatis框架从入门到精通 文档&#xff1a; https://mybatis.net.cn/index.html Mapper代理开发 目的 解决…...

【React系列】受控非受控组件

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. refs 的使用 在React的开发模式中&#xff0c;通常情况下不需要、也不建议直接操作DOM原生&#xff0c;但是某些…...

OpenCV-Python(22):2D直方图

目标 了解图像的2D直方图绘制2D直方图 介绍 在前面的部分我们介绍了如何绘制一维直方图&#xff0c;之所以称为一维&#xff0c;是因为我们只考虑了图像的一个特征&#xff1a;灰度值。但是在2D 直方图中我们就需要考虑两个图像特征。对于彩色图像的直方图通常情况下我们需要…...

Kubernetes 100个常用命令

本文简单总结关于使用 Kubectl 进行 Kubernetes 诊断的指南。列出了 100 个 Kubectl 命令&#xff0c;这些命令对于诊断 Kubernetes 集群中的问题非常有用。这些问题包括但不限于&#xff1a; 集群信息 Pod 诊断 服务诊断 部署诊断 网络诊断 持久卷和持久卷声明诊断 资源…...

labuladong日常刷题-差分数组 | LeetCode 1109航班预定统计 | 花式遍历 151反转字符串里的单词

差分数组–前缀和数组的升级 LeetCode 1109 航班预定统计 2024.1.1 题目链接labuladong讲解[链接] class Solution { public:vector<int> corpFlightBookings(vector<vector<int>>& bookings, int n) {//构建航班人数数组&#xff0c;数组大小为n,初…...

HbuilderX中的git的使用

原文链接https://blog.csdn.net/Aom_yt/article/details/119924356...

LeetCode每日一题 | 1944. 队列中可以看到的人数

文章目录 队列中可以看到的人数题目描述问题分析程序代码&#xff08;Golang 版本&#xff09; 队列中可以看到的人数 题目描述 原题链接 有 n 个人排成一个队列&#xff0c;从左到右 编号为 0 到 n - 1 。给你以一个整数数组 heights &#xff0c;每个整数 互不相同&#xff…...

React16源码: JSX2JS及React.createElement源码实现

JSX 到 Javascript 的转换 React中的 JSX 类似于 Vue中的template模板文件&#xff0c;Vue是基于编译时将template模板转换成render函数在React中&#xff0c;JSX是类似于html和javascript混编的语法&#xff0c;而javascript是真的javascript, html并非真的html它的可阅读性可…...

整理composer安装版本的python脚本

整理composer安装版本的python脚本 脚本实现的功能是去除composer安装命令后的版本号 def remove_version_numbers(commands):"""Remove version numbers from composer require commands.Args:commands (list of str): List of composer require commands.Retu…...

十、基本对话框大集合(Qt5 GUI系列)

目录 一、设计需求 二、实现代码 三、代码解析 四、总结 一、设计需求 Qt提供了很多标准的对话框。例如标准文件对话框(QFileDialog)、标准颜色对话框(QColorDialog)、标准字体对话框 (QFontDialog)、标准输入对话框 (QInputDialog) 及消息对话框 (QMessageBox)。本文展示各…...

大A又跌了

才开盘几天&#xff0c;又开始下跌了。生活更加苦难。期待高深算法。...

This error originates from a subprocess, and is likely not a problem with pip

我遇这个问题是的原因是包名错误 注意检查包名...

数据库基础知识1

关系模型的程序员不需熟悉数据库的存取路径 在3层模式结构中,___I___是数据库的核心和关键,___Ⅱ___通常是模式的子集,数据库模式的描述提供给用户,____Ⅲ__的描述存储在硬盘上。Ⅰ.模式Ⅱ. 外模式Ⅲ. 内模式 数据库中,数据的物理独立性是指用户的应用程序与存储在磁盘上数据库…...

【GO语言卵细胞级别教程】01.GO基础知识

01.GO基础知识 目录 01.GO基础知识1.GO语言的发展历程2.发展历程3.Windowns安装4.VSCode配置5.基础语法5.1 第一段代码5.2 GO执行的流程5.3 语法规则5.4 代码风格5.5 学习网址 1.GO语言的发展历程 Go语言是谷歌公司于2007年开始开发的一种编程语言&#xff0c;由Robert Griese…...

215.【2023年华为OD机试真题(C卷)】按身高和体重排排队(排序题-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-按身高和体重排排队二.解题思路三.题解代码Pyt…...

虚函数(C++)

四、多态4.1 虚函数 四、多态 多态性是面向对象程序设计语言的又一重要特征&#xff0c;多态&#xff08;polymorphism&#xff09;通俗的讲&#xff0c;就是用一个相同的名字定义许多不同的函数&#xff0c;这些函数可以针对不同数据类型实现相同或类似的功能&#xff0c;即所…...

力扣25题: K 个一组翻转链表

【题目链接】力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台&#xff0c;解题代码如下&#xff1a; class Solution {public ListNode reverseKGroup(ListNode head, int k) {ListNode curNode head;ListNode groupHead, groupTail head, lastGrou…...

网络安全应急响应工具之-流量安全取证NetworkMiner

在前面的一些文章中&#xff0c;用了很多的章节介绍流量分析和捕获工具wireshark。Wireshark是一款通用的网络协议分析工具&#xff0c;非常强大&#xff0c;关于wireshark的更多介绍&#xff0c;请关注专栏&#xff0c;wireshark从入门到精通。本文将介绍一个专注于网络流量取…...

http 401 错误

HTTP 401 错误表示未被授权&#xff0c;指客户端通过请求头中的身份验证数据进行身份验证&#xff0c;服务器返回401状态码表示身份验证失败。HTTP 401 错误通常与身份验证和授权相关的 Web 请求有关。 一、HTTP 401错误的定义 HTTP 401 错误是 HTTP 状态码的一种。由于服务器…...

Docker-Compose部署Redis(v7.2)哨兵模式

文章目录 一、前提准备1. 主从集群2. 文件夹结构 二、配置文件1. redis server配置文件2. redis sentinel配置文件3. docker compose文件 三、运行四、测试 环境 docker desktop for windows 4.23.0redis 7.2 一、前提准备 1. 主从集群 首先需要有一个redis主从集群&#x…...

解决问题:PPT中插入视频编辑模式可以播放,幻灯片放映后播放不了

目录 一、原因分析二、解决办法三、其它问题 一、原因分析 这可能是由于PowerPoint的硬件图形加速功能导致的。 二、解决办法 禁用硬件图形加速。 &#xff08;1&#xff09;点击《文件》选项卡 &#xff08;2&#xff09;点击《选项》 &#xff08;3&#xff09;在《高级》…...

使用react+vite开发项目时候,部署上线后刷新页面无法访问解决办法

说一下我这边的环境和使用的路由模式&#xff1a;vitereactBrowserRouter路由模式&#xff0c;所以如果你和我一样的话&#xff0c;可以试试我的这种解决办法&#xff0c;我是将项目打包后直接丢到服务器上的目录里面&#xff0c;然后配置nginx直接访问根目录。 我的nginx配置…...

45. 跳跃游戏 II(Java)

题目描述&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到…...

热门视频素材/宁波网站seo诊断工具

在用eclipse开发时&#xff0c;经常遇到卡死的情况&#xff0c;其中一种就是右下角出现&#xff1a;“Remote System Explorer Operation”&#xff0c;解决方案如下&#xff1a; 第一步&#xff1a;Eclipse -> Preferences -> General -> Startup and Shutdown.不要勾…...

青岛做网站公司哪家好/企业内训机构

1.背景介绍 相信很多人手机上都收到过一些营销短信&#xff0c;短信里面有时候会附带一些网址&#xff0c;如下图 这些网址往往都是非常短&#xff0c;但是当我们打开之后&#xff0c;如果你仔细观察&#xff0c;中间会有跳转&#xff0c;最终浏览器地址栏显示的网址并不是你短…...

南昌制作网站的公司吗/网站推广营销

文章目录 一、题目🔸题目描述🔸输入输出🔸样例1二、代码参考作者:KJ.JK🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🍂个人博客首页: KJ.JK 💖系列专栏:华为OD机试(Java&Python&C语言) 一、题目 🔸题目描述 对输入的字符串进…...

东莞网站建设环保设备/如何开发软件app

某个项目要进行实施工作&#xff0c;购买了50台左右的阿里云的服务器。 ** 由于服务器安全及其他原因&#xff0c;购买了NAT网关。但是在测试配置时&#xff0c;局域网内的所有服务器 ping 公网 ip 都无法 ping 通&#xff0c;但是私网地址所有服务器之间又可以相互ping通。 …...

网站维护更新费用/最好的seo外包

前言之前在项目的存储过程中发现有通过 DECLARE 关键字定义的变量如DECLARE cnt INT DEFAULT 0;&#xff0c;还有形如 count 这样的变量&#xff0c;存储过程中拿过来直接就进行设置&#xff0c;像这样set count1;&#xff0c;这两种类型的变量究竟有什么区别却弄不清楚&#x…...

上海中学国际部/seo营销是什么

一. HAOOP集群环境搭建 参考&#xff1a;Hadoop的HA集群搭建 二. WordCount代码编写 1. 搭建maven工程 2. pom中添加hadoop和hdfs依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-start…...