ElementUI 用span-method实现循环el-table组件的合并行功能

embedded/2024/9/24 20:44:22/

需要把指定列的相同数据合并起来(项目中用的是updateTime)

后端返回的数据格式:

html: 

<el-tab-pane label="执行记录概览" name="fourth" v-loading="loading"><el-timeline v-if="recordList.length > 0"><el-timeline-itemv-for="(item, index) in recordList":key="index":timestamp="item.createTime"placement="top"><el-card><el-tabsv-model="activeName2[index]"@tab-click="handleClick2($event, index)"><el-tab-pane label="阻断列表" name="first"><el-table:data="item.disposesList":span-method="(params) => objectSpanMethod(params, item)"border><!-- <el-table-columnalign="center"type="index"label="序号"/> --><el-table-columnprop="updateTime"label="时间"width="160"></el-table-column><el-table-column prop="hostnameIp" label="域名/IP"></el-table-column><!-- <el-table-column prop="type" label="阻断状态" width="100"><template slot-scope="scope"><span>{{ getBlockState(scope.row.blockState) }}</span></template></el-table-column> --><el-table-column prop="type" label="类型" width="100"><template slot-scope="scope"><span>{{ getTypelVal(scope.row.type) }}</span></template></el-table-column><el-table-column prop="label" label="标签" width="120"><template slot-scope="scope"><span>{{ getLabelVal(scope.row.label) }}</span></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="快照截图" name="second"><Snapshot :snapshotList="item.snapshotList"></Snapshot></el-tab-pane><el-tab-pane label="通信流量" name="third"><Traffic :networkList="item.networkList"></Traffic></el-tab-pane></el-tabs></el-card></el-timeline-item></el-timeline><div v-if="!recordList.length" class="nodata"><img class="empty-pic" src="@/assets/images/nodata.png" alt="" /></div></el-tab-pane>

js:

javascript"> data() {return {recordList: [],activeName2: {}, // 用一个对象来存储每个tab的激活状态}}methods: {
handleClick2(tab, index) {this.$set(this.activeName2, index, tab.name);},
getAllList() {this.loading = true;getAllList({taskId: this.taskId,}).then((response) => {this.recordList = response.rows;this.loading = false;// 初始化activeTab对象this.recordList.forEach((item, index) => {this.$set(this.activeName2, index, "first"); // 假设默认第一个面板是激活的});});},
objectSpanMethod({ row, column, rowIndex, columnIndex }, item) {// console.log(row, column, rowIndex, columnIndex);if (columnIndex === 0) {// name列// 获取当前行的name值let currentName = row.updateTime;let previousName =rowIndex > 0 ? item.disposesList[rowIndex - 1].updateTime : null;let nextName =rowIndex < item.disposesList.length - 1? item.disposesList[rowIndex + 1].updateTime: null;// 如果当前行的name与上一行相同,隐藏该单元格if (currentName === previousName) {return { rowspan: 0, colspan: 0 };}// 如果当前行的name与下一行相同,合并行let rowspan = 1;while (nextName === currentName) {rowspan++;rowIndex++;nextName =rowIndex < item.disposesList.length - 1? item.disposesList[rowIndex + 1].updateTime: null;}return { rowspan, colspan: 1 };}},
},


http://www.ppmy.cn/embedded/114678.html

相关文章

【算法】算法思想合集

数组分块 将数组分成具有某些特征的段使用双指针算法&#xff08;如果是数组&#xff0c;使用下标充当指针&#xff09;存在信息丢失的问题&#xff0c;可以考虑从后向前进行利用单调性进行定性分析&#xff08;盛最多的水&#xff09; 滑动窗口同向移动的双指针出窗口一般是w…

09年408考研真题-数据结构

数据结构 10.【2009统考真题】为解决计算机主机与打印机之间速度不匹配的问题&#xff0c;通常设置一个打印数据缓冲区&#xff0c;主机将要输出的数据依次写入该缓冲区&#xff0c;而打印机则依次从该缓冲区中取出数据。该缓冲区的逻辑结构应该是(B&#xff09;。 A.栈 …

计算机网络:物理层 --- 基本概念、编码与调制

目录 一. 物理层的基本概念 二. 数据通信系统的模型 三. 编码 3.1 基本概念 3.2 不归零制编码 3.3 归零制编码 3.4 曼切斯特编码 3.5 差分曼切斯特编码 ​编辑 四. 调制 4.1 调幅 4.2 调频 4.3 调相 4.4 混合调制 今天我们讲的是物理…

极狐GitLab DevSecOps 功能合集(七大安全功能)

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…

第二十节:学习Redis缓存数据库实现增删改查(自学Spring boot 3.x的第五天)

这节记录下如何使用redis缓存数据库。 第一步&#xff1a; 先在服务器端安装redis&#xff0c; 下载地址&#xff1a;Releases tporadowski/redis GitHub。 第二步&#xff1a; 安装redis客户端可视化管理软件redisDesktopmanager Redis Desktop Manager - Download 第…

【可测试性实践】C++单元测试:gtest gmock

引言 google test是目前C主流的单元测试框架&#xff0c;本文介绍如何在工程引入gtest和gmock&#xff0c;并提供入门参考示例。根据黄金圈思维我们先思考Why&#xff08;为什么做&#xff09;&#xff0c;为什么我们要进行单元测试&#xff0c;为什么要引入mock手段来测试代码…

【艾思科蓝】Spring全家桶使用深度教程:从入门到精通

【IEEE出版 | 连续4届稳定EI检索】第五届计算机工程与智能控制国际学术会议&#xff08;ICCEIC 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看 学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录 引言 一、Spring Framework基础 1.1 Spring Framework简…

HTTP中的Cookie与Session

一、背景 HTTP协议是无状态无连接的。 无状态&#xff1a;服务器不会保存客户端历史请求记录&#xff0c;每一次请求都是全新的。 无连接&#xff1a;服务器应答后关闭连接&#xff0c;每次请求都是独立的。 无状态就导致服务器不认识每一个请求的客户端是否登陆过。 这时…