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

需要把指定列的相同数据合并起来(项目中用的是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:

 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.xdnf.cn/news/145474.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

活动目录安全

活动目录安全 1.概述2.常见攻击方式SYSVOL与GPP漏洞MS14-068漏洞Kerberoast攻击内网横移抓取管理员凭证内网钓鱼与欺骗用户密码猜解获取AD数据库文件 3.权限维持手段krbtgt账号与黄金票据服务账号与白银票据利用DSRM账号利用SID History属性利用组策略利用AdminSDHolder利用SSP…

【Geoserver使用】REST API调用(工作空间部分)

文章目录 前言一、Geoserver REST API(GeoServer Workspace)二、GeoServer Workspace接口使用1.GET请求 /workspaces2.POST请求 /workspaces3.GET请求 /workspaces/{workspaceName}4.PUT /workspaces/{workspaceName}5.DELETE /workspaces/{workspaceName} 总结 前言 根据Geos…

操作系统笔记三

进程 把一个静态程序通过OS在内存中让cpu执行起来的动态执行过程叫进程 写代码都是用户态&#xff0c;而进程在执行过程中需要完成特定的功能&#xff0c;这些功能呢只有操作系统能提供&#xff0c;比如说读写文件&#xff0c;读写文件的过程是与硬盘打交道&#xff0c;这个过程…

《COMMA: Co-articulated Multi-Modal Learning》中文校对版

系列论文研读目录 文章目录 系列论文研读目录摘要导言相关工作视觉语言模型提示学习视觉语言模型中的提示学习 方法准备工作提议方法 实验基准设定基础到新的概括跨数据集传输消融实验 结论 摘要 经过预训练的大规模视觉语言模型&#xff08;如CLIP&#xff09;已经在一系列下…

SpringBoot Admin调整类的日志级别

进入 SpringBoot Admin &#xff0c;通过服务名称&#xff0c; 找到服务后。 点击 “日志” – “日志配置” &#xff0c;输入类名&#xff0c;即可调整 这个类的日志级别。

solidwork关闭阴影

在上方的菜单栏中找到“视图”选项&#xff0c;进行点击。 然后在出现的下拉菜单中选择“显示”选项&#xff0c;如图所示。 然后在出现的二级菜单中&#xff0c;点击选项“在上色模式中的阴影”&#xff0c;使此功能处于抑制状态。 完成以上设置后&#xff0c;即可关闭s…

攻防世界--->gametime

做题笔记。 前言&#xff1a; 因为有意思&#xff0c;所以&#xff0c;&#xff0c;&#xff0c;打通关了。。哈哈哈。 题外话&#xff1a;哦&#xff0c;程序结果还在&#xff0c;是因为我是在WSL—Debian上运行的。你还别说&#xff0c;真挺好用的&#xff0c;vm虚拟机能不…

无人机飞手培训机构六旋翼训练无人机技术详解

六旋翼无人机作为多旋翼无人机的一种&#xff0c;以其独特的稳定性、灵活性和载重能力&#xff0c;在航拍、农业、救援、物流等多个领域展现出广泛的应用前景。它采用六个旋翼产生升力&#xff0c;通过复杂的飞行控制系统实现悬停、前后左右飞行、翻滚等复杂动作&#xff0c;为…

深入解析 Apache Doris架构、应用场景与最佳实践

一、Doris 简介 Apache Doris 是一款现代化的 MPP&#xff08;Massively Parallel Processing&#xff09;数据库&#xff0c;专注于解决大规模数据分析和实时查询的需求。它最初源自百度的 Palo 项目&#xff0c;随后贡献给了 Apache 基金会&#xff0c;并在开源社区的共同努…

【STL】map和set相关知识详细梳理

1. 预备知识 1.1 关联式容器 在之前&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面 存储的是元素本身。…

【内积】内积计算公式及物理意义

内积&#xff1a; 内积又称标量积、点积、数量积 内积计算公式&#xff1a; 代数定义&#xff1a; 两个向量 a [a1,a2,a3,…,an] b [b1,b2,b3,…,bn] 则有&#xff1a; 几何定义&#xff1a; 物理意义&#xff1a; 当内积为正值时&#xff0c;两个向量指向大致相同方向&a…

实时美颜的技术突破:视频美颜SDK与直播美颜工具的开发详解

如今&#xff0c;视频美颜SDK和直播美颜工具的开发&#xff0c;为各类应用提供了技术支持&#xff0c;使得美颜效果更加智能、高效。本文将详细探讨实时美颜的技术突破及其在视频美颜SDK和直播美颜工具中的应用与开发。 一、视频美颜SDK的核心技术 1.人脸检测与特征点识别 视…

工业控制系统等保2.0定级备案经验分享

工业控制系统和传统IT系统有所差异&#xff0c;须单独划分定级对象 工业控制系统定级时将现场采集/执行、现场控制和过程控制等要素应作为一个整体对象定级&#xff0c;各要素不单独定级&#xff1b;生产管理要素可单独定级。对于大型工业控制系统&#xff0c;可以根据系统功能…

Python 中的 Kombu 类库

Kombu 是一个用于 Python 的消息队列库&#xff0c;提供了高效、灵活的消息传递机制。它是 Celery 的核心组件之一&#xff0c;但也可以单独使用。Kombu 支持多种消息代理&#xff08;如 RabbitMQ、Redis、Amazon SQS 等&#xff09;&#xff0c;并提供了消息生产者和消费者的功…

计算机的错误计算(九十九)

摘要 讨论 的计算精度问题。 计算机的错误计算&#xff08;五十五&#xff09;、&#xff08;七十八&#xff09;以及&#xff08;九十六&#xff09;分别列出了 IEEE 754-2019[1]中的一些函数与运算。下面再截图给出其另外几个运算。 另外&#xff0c;计算机的错误计算&…

风力发电机各部位边缘识别检测数据集 yolo数据集 共7300张

风力发电机各部位边缘识别检测数据集 yolo数据集 共7300张 风力发电机各部位边缘识别检测数据集 数据集描述 该数据集是一个专门用于风力发电机各部位边缘识别和检测的数据集&#xff0c;旨在帮助研究人员和开发者训练和评估基于深度学习的目标检测模型。数据集中的图像涵盖了…

卡牌抽卡机小程序:市场发展下的创新

今年以来&#xff0c;卡牌成为了行业中的黑马&#xff0c;在国内迅速流行&#xff0c;成为消费者的心头好。小小的卡牌创下了百亿的市场规模&#xff0c;发展前景巨大&#xff01; 不过&#xff0c;随着卡牌市场的不断增长&#xff0c;市场发展也需要进行创新。线上抽卡机小程…

系统架构设计师|数据库基础-006

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、 腾讯云优秀创作者、腾讯云TDP-KOL、墨天轮技术专家博主、ACDU成员 &#x1f3…

Linux top命令详解与重点内容说明

文章目录 重点说明基本信息进程(任务)信息cpu占用信息%Cpu(s)内存信息交换内存信息每列含义说明交互命令多窗口模式颜色配置命令参数 重点说明 top命令非常强大&#xff0c;也非常复杂&#xff0c;很难面面俱到&#xff0c;也没有必要&#xff0c;这篇文章的目的是介绍重点&am…

面试题给图例举测试用例或测试点

目录 从功能测试的角度考虑&#xff1a; 从性能角度考虑&#xff1a; 从兼容性的角度考虑&#xff1a; 从自动化角度考虑&#xff1a; 从安全性角度考虑&#xff1a; 用户体验的角度测试&#xff1a; 面试通常会有技术和人事两种&#xff0c;侧重点不一样。 今天聊一下测…