vue2+element-ui新增编辑表格+删除行

实现效果:

 

代码实现 :

          <el-table :data="dataForm.updateData"border:header-cell-style="{'text-align':'center'}":cell-style="{'text-align':'center'}"><el-table-column label="选项字段"align="center"prop="name"><template slot-scope="scope"><el-form-item :prop="'updateData.' + scope.$index + '.formName'":rules="[{ required: true, message: '请输入', trigger: 'blur' },{ min: 1, max: 20, message: '长度在1到 20个字符', trigger: 'blur' }]"><el-input v-model="scope.row.formName"clearable></el-input></el-form-item></template></el-table-column><el-table-column fixed="right"label="操作"><template slot-scope="scope"><el-button @click.native.prevent="addRow(scope.$index,scope.row,dataForm.updateData)"type="text"size="small">新增</el-button><el-button @click.native.prevent="deleteRow(scope.$index,scope.row,dataForm.updateData)"type="text"size="small"v-if="dataForm.updateData.length!=1">移除</el-button></template></el-table-column></el-table><script>
export default {data () {return {dataForm: {// 自定义字段updateData: [{// id: '',formName: ''}]// 其他...    }}},methods: {// addRow 新增 自定义字段表格行addRow (index, rows, item) {// console.log(index, rows, item)// this.dataForm.updateData.push({//   // sort: this.dataForm.updateData && this.dataForm.updateData.length > 0 ? this.dataForm.updateData.length + 1 : 1,//   id: null,//   formName: ''// })// 数组中添加新元素item.splice(index + 1, 0, { formName: '' })},// deleteRow 删除 自定义字段表格行deleteRow (index, rows, item) {// console.log(index, '当前行索引', rows, '删除的目标行')// 从index这个位置开始删除数组后的1个元素item.splice(index, 1)// this.$confirm('删除当前行, 是否继续?', '提示', {//   confirmButtonText: '确定',//   cancelButtonText: '取消',//   type: 'warning'// }).then(() => {//   item.splice(index, 1)//   // this.delArrId.push(rows.id) // 被删除的id数组集合//   // rows.isDelete = 1// }).catch(() => {//   this.$message({//     type: 'info',//     message: '已取消删除'//   })// })},}
}
</script>

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

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

相关文章

Linux 内核 GPIO 用户空间接口

文章目录 Linux 内核 GPIO 接口旧版本方式&#xff1a;sysfs 接口新版本方式&#xff1a;chardev 接口 gpiod 库及其命令行gpiod 库的命令行gpiod 库函数的应用 GPIO&#xff08;General Purpose Input/Output&#xff0c;通用输入/输出接口&#xff09;&#xff0c;是微控制器…

MAX()和ROW_NUMBER()函数的对比

SQL 查询中,使用 MAX() 函数和使用窗口函数 ROW_NUMBER() 都可以实现获取每个分组中某个列的最大值,但它们的实现方式和性能表现有所不同。以下是两者的区别和性能对比: 使用 MAX() 函数 SELECTMAX(d.times) FROMv_y d WHEREd.id = a.idAND d.name = a.nameAND d.age = a.…

交换机需要多大 buffer(续:更一般的原理)

前面用 aimd 系统分析了交换机 buffer 需求量随流数量增加而减少&#xff0c;今天从更一般的角度继续分析这事。 将交换机建模为一个 m/m/1 排队系统&#xff0c;多流场景下它就会变成一个 m/g/1 排队系统&#xff0c;而这事比前面的 aimd 系统分析更容易推导。 m/m/1 系统中…

哪里还可以申请免费一年期的SSL证书?

目前&#xff0c;要申请免费一年期的SSL证书&#xff0c;选项较为有限&#xff0c;因为多数供应商已转向提供短期的免费证书&#xff0c;通常有效期为90天。不过&#xff0c;有一个例外是JoySSL&#xff0c;它仍然提供一年期的免费SSL证书&#xff0c;但是只针对教育版和政务版…

halcon学习

halcon列程详细介绍-V1.3 从文件夹中遍历图片(用到的算子及实例) 1)list_files(::Directory,Options:Files) 功能:列出目录中的所有文件 参数列表: 第1个参数Directory为输入变量,需要列出的目录名字,即输入目录地址; 第2个参数Options为输入变量,默认值为files,建…

html三级菜单

示例 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Menu Example</title> <link re…

mybatispuls 分页插件的基本原理是什么?

MyBatis-Plus 是一个基于 MyBatis 的增强框架,它提供了许多额外的功能,其中分页插件是一个常用的功能。分页插件的基本原理是拦截 SQL 语句,在执行查询之前对 SQL 进行修改,以实现分页的功能。以下是 MyBatis-Plus 分页插件的基本原理及其工作机制: 1. 基本原理 分页插件…

LED显示屏跟COB显示屏有哪些不同?

COB显示屏跟LED显示屏的主要区别在于产品的显示效果、封装技术、耐用性、防护力、维护以及制造成本方面的不同&#xff0c;这里所说的LED显示屏主要指的是使用SMD封装的LED显示屏&#xff0c;今天跟随COB显示屏厂家中品瑞科技一起来详细看看具体分析&#xff1a; 一、封装技术 …

品牌推广的深层逻辑:自我提升与市场认同的和谐共生

品牌推广的深层逻辑&#xff1a;自我提升与市场认同的和谐共生 著名飞行员查尔斯林德伯格(Charles Lindbergh) 曾写道:“改善生活方式比传播生活方式更重要。如果我们自己的生活方式使别人感到满意&#xff0c;那么它将自动蔓延。如果不是这样&#xff0c;那么任何武力都不可能…

如何在 Odoo 16 中继承和更新现有邮件模板

在本文中,让我们看看如何在 Odoo 16 中继承和编辑现有邮件模板。我们必须这样做才能对现有模板的内容进行任何调整或更新。让我们考虑一个在会计模块中更新邮件模板的示例。 单击“account.move”模型中的“发送并打印”按钮后,将打开上述向导。在这里,我们将进行更改。从…

8人团队历时半年打造开源版GPT-4o,零延迟演示引爆全网!人人可免费使用!

目录 01 Moshi 02 背后技术揭秘 GPT-4o可能要等到今年秋季才会公开。 然而&#xff0c;由法国8人团队开发的原生多模态Moshi&#xff0c;已经达到了接近GPT-4o的水平&#xff0c;现场演示几乎没有延迟&#xff0c;吸引了大量AI专家的关注。 令人惊讶的是&#xff0c;开源版的…

Python酷库之旅-第三方库Pandas(003)

目录 一、用法精讲 4、pandas.read_csv函数 4-1、语法 4-2、参数 4-3、功能 4-4、返回值 4-5、说明 4-6、用法 4-6-1、创建csv文件 4-6-2、代码示例 4-6-3、结果输出 二、推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、Python魔法之旅 …

T100-XG查询报表的开发

制作XG报表 1、注册程序 azzi900 首先现将程序注册一下,在内部构建基础代码档。 2、注册作业 azzi910 也是直接新增一个,作业跟程序绑定一下。 3、T100签出规格程序 这个时候应该是没签出的,首先将规格迁出。 4、T100画面产生器 规格迁出之后,这个时候还需要生成一个画…

springcloud-gateway 网关组件中文文档

Spring Cloud网关 Greenwich SR5 该项目提供了一个基于Spring生态系统的API网关&#xff0c;其中包括&#xff1a;Spring 5&#xff0c;Spring Boot 2和项目Reactor。Spring Cloud网关的目的是提供一种简单而有效的方法来路由到API&#xff0c;并向它们提供跨领域的关注&#x…

Java中的数据脱敏与隐私保护技术

Java中的数据脱敏与隐私保护技术 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着信息化进程的加深&#xff0c;数据安全和隐私保护越来越受到关注。数据脱…

Python文件读入操作

本套课在线学习视频&#xff08;网盘地址&#xff0c;保存到网盘即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/e2ba7867f034​​ Python编程中&#xff0c;文件操作是一项基础且重要的技能。本文将详细介绍如何使用Python进行文件的打开、读取、写入和关…

配置基于不同IP地址的虚拟主机

定义配置文件vhost.conf <directory /www> allowoverride none require all granted </directory> <virtualhost 192.168.209.136:80> documentroot /www servername 192.168.209.136 </virtualhost><virtualhost 192.168.209.138:80> document…

Restore Equipment

Restore Equipment 魔兽世界 - 盗号申请 - 恢复装备流程 魔兽和网易真的不行啊 1&#xff09;这个装备本来就是兑换的竟然可以卖NPC 2&#xff09;针对这个情况竟然无法挽回 3&#xff09;设计理念真的不得不吐槽一下 4&#xff09;策划真的不咋样&#xff0c;要是有机会我要自…

【C++】 解决 C++ 语言报错:Stack Overflow

文章目录 引言 栈溢出&#xff08;Stack Overflow&#xff09;是 C 编程中常见且严重的错误之一。栈溢出通常发生在程序递归调用过深或分配过大的局部变量时&#xff0c;导致栈空间耗尽。栈溢出不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为。本文将深入探讨栈溢出…

Linux系统安装青龙面板结合内网穿透实现使用公网地址远程访问

文章目录 前言一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用。本教程使用Docker部署青龙&#xff0c;如何安装Docker详见&#xff1a; 二、安装青龙面板三、映射本地部署的青龙面板至公网四、使用固定公网地址访问本地部署的青龙面板 …