动态增删表格

期望目标:实现一个能通过按钮来动态增加表格栏,每次能添加一行,每行末尾有一个删减按钮。

<el-button type="text" class="primary"@click="addMember()">+添加</el-button>
<el-table:data="memberList"style="width: 100%":header-cell-style="{background: '#fafafa',color: '#aaa',fontSize: '15px',}"><el-table-column prop="index" label="序号" width="60"><template slot-scope="scope"><span>{{ getMemberIndex(scope.$index) }}</span></template></el-table-column><el-table-column prop="facilityName" label="设施名称"><template slot-scope="scope"><el-select v-model="scope.row.facilityName" placeholder="请选择名称" clearable><el-option v-for="dict in dict.type.data_facilities_name" :label="dict.label" :value="dict.value"  /></el-select></template></el-table-column><el-table-column prop="facilitySpecificType" label="具体类型"><template slot-scope="scope"><el-select v-model="scope.row.facilitySpecificType" placeholder="请选择类型" clearable><el-option v-for="dict in dict.type.data_facilities_type" :label="dict.label" :value="dict.value"/></el-select></template></el-table-column><el-table-column prop="facilityLocation" label="设施位置"><template slot-scope="scope"><el-select v-model="scope.row.facilityLocation" placeholder="请选择位置" clearable><el-option v-for="dict in dict.type.data_equipment_location" :label="dict.label" :value="dict.value"/></el-select></template></el-table-column><el-table-column prop="facilityTp" label="规格"><template slot-scope="scope"><el-input v-model="scope.row.facilityTp"></el-input></template></el-table-column><el-table-column prop="accountabilityUnit" label="责任单位"><template slot-scope="scope"><el-input v-model="scope.row.accountabilityUnit"></el-input></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.$index,'memberList')">删除</el-button></template></el-table-column></el-table>// 添加杆件数据按钮addMember() {var member = {index: this.dataId++,facilityNo: '',facilityName: '',facilitySpecificType: '',facilityLocation: '',facilityTp: '',accountabilityUnit: '',};this.memberList.push(member);},

效果:

遇到的问题一:在删减时,当前所有行的序号需要自动删减,重新计算变更序号


// 删除行数据后序号自动连贯更新getMemberIndex(index) {return this.memberList.slice(0, index + 1).length ;},
/** 删除按钮操作 */handleDelete(index, listName) {if (index !== -1 && listName =="memberList") {this.memberList.splice(index, 1)}},

给序号那一栏字段单独重设,动态变更index,<span>{{ getMemberIndex(scope.$index) }}</span>,每次删除一行,调用handleDelete函数,再用getMember重新计算一遍所有序号

如果有数据验证的需求,就需要在table外面再嵌套一层form,因为只有el-form表单猜有数据验证的功能。

      <el-form :model="memberForm" :rules="rules" ref="memberForm"></el-form>

 问题二:

多个表单同时用一个接口提交,在提交数据表单时,后端要求有特殊的数据结构,需要将获取到的多个表单数据重新按要求整合。新设立一个json字段存储

/** 提交按钮 */async submitForms() {// 构建数据结构const facilitiesData = {pointId: this.pointForm.pointId,pointName: this.pointForm.pointName,memberList: this.memberList.map(member => ({facilityName: member.facilityName,facilitySpecificType: member.facilitySpecificType,facilityLocation: member.facilityLocation,facilityTp: member.facilityTp,accountabilityUnit: member.accountabilityUnit,})),}// 发送请求添加设施await addFacilities(facilitiesData).then(response => {this.$modal.msgSuccess("新增成功");this.goBack();})},

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

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

相关文章

Pandas Series的运算原来这么简单

Series的运算主要包括加法、减法、乘法和除法等基本算术运算。这些运算通常是按照索引对应计算的&#xff0c;如果两个Series的索引不同&#xff0c;则结果中对应位置将填充为NaN&#xff08;空值&#xff09;。 需要注意的是&#xff0c;在进行Series运算时&#xff0c;需要确…

【linux】进程(深入理解linux进程状态)

开始之前先说一个与本文无关的小知识&#xff0c;chdir命令可以更改当前进程的工作目录哦。 目录 linux具体进程状态&#xff1a;R && S&#xff1a;T && t&#xff1a;D&#xff1a;僵尸进程 && 孤儿进程&#xff1a; OS的理论线&#xff1a;运行&…

讯饶科技 X2Modbus 敏感信息泄露

讯饶科技 X2Modbus 敏感信息泄露 文章目录 讯饶科技 X2Modbus 敏感信息泄露漏洞描述影响版本实现原理漏洞复现修复建议 漏洞描述 X2Modbus是一款功能很强大的协议转换网关&#xff0c; 这里的X代表各家不同 的通信协议&#xff0c;2是To的谐音表示转换&#xff0c;Modbus就是最…

Map系列集合的底层原理及集合嵌套

HashMap集合的底层原理 HashMap跟HashSet的底层原理是一模一样的&#xff0c;都是基于哈希表实现的。 实际上:原来学的Set系列集合的底层就是基于Map实现的&#xff0c;只是Set集合中的元素只要键数据&#xff0c;不要值数据而已。 public HashSet()f{ mapnew HashMap<>…

Java请求体和响应体

请求体 Data JsonNaming(value PropertyNamingStrategies.UpperCamelCaseStrategy.class) public abstract class ApiReq implements LRequest {private String requestID; } 响应体 Data JsonNaming(value PropertyNamingStrategies.UpperCamelCaseStrategy.class) public…

Ps:应用智能锐化滤镜

智能锐化 Smart Sharpen滤镜具有“USM 锐化”滤镜所没有的锐化控制功能。不仅可以设置不同的锐化算法&#xff0c;还可以分别控制在阴影区域和高光区域中进行的锐化量。 ◆ ◆ ◆ 一般使用方法与步骤 1、根据模糊的原因选择“移去”算法&#xff0c;默认是“高斯模糊”。 2、…

制作场景资源的Prefab

制作骨骼模型的Prefab 现在游戏内的使用骨骼模型是通过老版的Animator去实现控制的&#xff0c;所以需要将模型切换为Animator 第一步&#xff0c;动画类型设置为Generic&#xff0c;创建Avatar 模型里面会有对应的Avatar文件 我们还需要一个Controller文件&#xff0c;用于…

镜像:数字时代的自我呈现与虚拟重构

在数字时代&#xff0c;镜像的概念已超越了传统的物理范畴&#xff0c;它不再仅仅是水面或镜面上的反射&#xff0c;而是深入到了我们日常生活的各个角落。作为信息技术发展的重要成果&#xff0c;数字镜像已成为人们认识自我、展现自我和重塑自我的重要工具。#AutoDL #AutoDL …

设计模式-状态模式(State Pattern)结构|原理|优缺点|场景|示例

设计模式&#xff08;分类&#xff09; 设计模式&#xff08;六大原则&#xff09; 创建型&#xff08;5种&#xff09; 工厂方法 抽象工厂模式 单例模式 建造者模式 原型模式 结构型&#xff08;7种&#xff09; 适配器…

Go 语言基础(二)【数组、切片、指针、map、struct】

1、数组 特别需要注意的是&#xff1a;在 Go 语言中&#xff0c;数组长度也是数组类型的一部分&#xff01;所以尽管元素类型相同但是长度不同的两个数组&#xff0c;它们的类型并不相同。 1.1、数组的初始化 1.1.1、通过初始化列表{}来设置值 var arr [3]int // int类型的数…

ArrayList知识点详解

目录 1.简介 2.ArrayList的使用 &#xff08;1&#xff09;如何实例化ArrayList&#xff1f;&#xff08;如何创建&#xff1f;&#xff09; &#xff08;2&#xff09;如何构造使用&#xff1f; &#xff08;3&#xff09;为什么ArrayList的无参构造可以添加数据 &#…

引用参数的不同种类

1. 示例一 #include <iostream> #include <string>struct Obj{Obj(){std::cout << "Ctor called.\n";}Obj(const Obj&){std::cout << "Copy ctor called.\n"; }~Obj(){std::cout << "Dtor called.\n";} }…

rust疑难杂症

rust疑难杂症解决 边碰到边记录&#xff0c;后续可能会逐步增加&#xff0c;备查 cargo build时碰到 Blocking waiting for file lock on package cache 原因是Cargo 无法获取对包缓存的文件锁&#xff0c; 有时vscode中项目比较多&#xff0c;如果其中某些库应用有问题&…

深入理解多层感知机MLP

1. 基础理论 神经网络基础&#xff1a; 目标&#xff1a;了解神经网络的结构&#xff0c;包括神经元、权重、偏置和激活函数。 神经网络是由多个层次的神经元组成的网络&#xff0c;它模拟了人脑处理信息的方式。每个神经元可以接收输入、处理输入并生成输出。这一过程涉及到…

Linux防火墙与SElinux

文章目录 一、防火墙介绍二、iptables和firewalld的区别操作方式&#xff1a;配置层面&#xff1a;性能和管理&#xff1a; 三、iptables与firewalld的优缺点iptablesfirewalld 四、iptables的工作流程五、firewalld的工作流程六、iptables安装与使用6.1、关闭firewalld服务6.2…

c#数据库: 11.分组统计学生信息/ 12.视图查询

该例以学生信息表为例&#xff0c;将学生信息按年级和性别分组&#xff0c;统计各年级男生和女生的人数、总成绩和平均成绩&#xff0c;并将查询结果按平均成绩降序排列。下图是原数据表staq: 【C#实现过程】 &#xff08;1&#xff09;创建一个名为StudentGroup的窗体应用程序…

RK3588S和ARM阵列服务器在虚拟化云平台的应用

RK3588是瑞芯微2021年底推出的首款高端8nm旗舰芯片&#xff0c;而RK3588S 则是针对消费端市场在RK3588基础上缩减了部分外围接口&#xff0c;CPU、GPU和NPU等主要参数得到了保留&#xff0c;主要应用范围为高端ARM平板、ARM笔电产品&#xff0c;会议平板类、ARM服务器、智能机器…

HTML_CSS学习:常用的字符属性

一、字体大小 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>字体大小</title><style>/*body{*//* font-size: 20px;*//*}*/.atguigu1{font-size: 40px;}.atguigu2{font-size: 30px;…

如何批量删除多个不同路径的文件但又保留文件夹呢

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 1、我准备了三个文件夹&#xff08;实际操作的时候可能是上百个文件夹&#xff0c;无所谓&#xff09;&#xff0c;里面都放了两个图片 2、然后打开工具&am…

【Gateway】网关集成Knife4j—swagger接口文档

文章目录 前言一、相关配置1.网关gateway配置①.网关增加配置 pom文件②.网关增加配置 SwaggerHandler③.网关增加配置 SwaggerResourceConfig④.网关增加配置 SwaggerConfig 2.网关过滤器 二、接口文档使用1.访问文档2.查看文档 总结 前言 在日常开发中是需要前后端联调的&am…