动态增删表格

news/2024/9/23 6:27:52/
htmledit_views">

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

<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.ppmy.cn/news/1448083.html

相关文章

人事管理|基于SprinBoot+vue的企业人事管理系统(源码+数据库+文档)

人事管理目录 基于SprinBootvue的企业人事管理系统 一、前言 二、系统设计 三、系统功能设计 1管理员功能模块 2员工功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设…

2024年CMS市场的份额趋势和使用统计

目前市面上有超过一半的网站都是使用CMS来搭建的&#xff0c;据不完全统计&#xff0c;现在大概有900多种CDM可供选择&#xff0c;以下是最常见的CMS的市场份额和使用率信息&#xff1a; 除了WordPress以外&#xff0c;Shopify和Wix也是比较流行的内容管理系统&#xff0c;尤其…

webpack打包工具

目录 1. yarn包管理器 1.1 yarn 是什么, 有什么用? 1.2 yarn的使用 ​​​​​​2. webpack基本概述 2.1 webpack是什么&#xff1f; 2.2 什么是打包&#xff1f; 2.3 webpack能做什么&#xff1f; 3. webpack基本使用步骤 3.1 webpack基本使用步骤 3.2 package.jso…

移植 SquareLine 导出的 UI 源码到 HMI-Board

目录 准备工具创建 HMI 工程设计 UIUI 移植板级验证更多内容 HMI-Board 为 RT-Thread 联合瑞萨推出的高性价比图形评估套件&#xff0c;取代传统的 HMI 主控板 硬件&#xff0c;一套硬件即可实现 HMI IoT 控制 的全套能力。依托于瑞萨高性能芯片 RA6M3 及 RT-Thread 软件生态…

MATLAB | 全网唯一!使用MATLAB绘制各类螺旋图

全网唯一&#xff0c;MATLAB绘制各类螺旋图&#xff0c;还在为X轴过长而困扰吗&#xff1f;把X轴盘起来就可以优雅的绘图&#xff01;&#xff01;今天带来的是由本人开发的SSpiral MATLAB 工具包&#xff0c;&#xff0c;本期工具函数绘图效果&#xff1a; 工具函数放在最后&a…

GoLang Gin实际使用

所有代码同步到Admin/gitDemo - Gitee.comhttps://gitee.com/mec-deployment-team_0/git-demo/tree/dev/ 1.创建Gin框架 一般设计一个常规的web项目&#xff0c;都需要以下几个模块 runApp 主函数&#xff0c;运行整个项目routes 路由控制&#xff0c;管理跳转以及路由分组co…

windows编程中的位图操作,界面中插入位图方法

在界面中插入位图&#xff0c;主要用到BitBlt这个函数 BOOL CDC::BitBlt(int x, int y, int width, int height, CDC *src, int src_x, int src_y, DWORD dwRop)用法说明见官方说明 这里要注意的是&#xff0c;这个函数是把源图像从src这个设备上下文传递到目标设备上下文(这…

【类型商店】字符字符串(上)

啊&#xff0c;哈喽&#xff0c;小伙伴们大家好。我是#Y清墨&#xff0c;今天呐&#xff0c;我要介绍的是字符与字符串。 导语 在我之前发的[算法材料包]C数字拆分里有提及到.size()和length()和strlen(),想看更多内容请别划走&#xff01; 一.论字符 &#xff08;1&#xff…