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.rhkb.cn/news/428720.html

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

相关文章

windows安装Anaconda教程

一、简介 Anaconda 是一个开源的 Python 和 R 语言的分发平台&#xff0c;专为科学计算和数据分析设计。它包含了包管理器 Conda&#xff0c;可以方便地安装和管理库、环境和依赖项。此外&#xff0c;Anaconda 还附带了许多数据科学工具和库&#xff0c;如 Jupyter Notebook 和…

Ubuntu截图工具flameshot

最近在使用香橙派做一些东西&#xff0c;有些内容需要截图记录&#xff0c;这里记录一下截图工具的安装和使用过程&#xff0c;方便以后查阅。 Ubuntu截图工具flameshot flameshot 简介flameshot 安装flameshot 相关命令 flameshot 简介 linux系统里面最好用的截屏工具支持图形…

el-table的树形结构结合多选框使用,实现单选父子联动,全选,反选功能

<template><div><el-table:data"tableData":row-key"rowKey":default-expand-all"defaultExpandAll":tree-props"treeProps"><!-- 开启树形多选 --><el-table-column v-if"showSelection" width…

[Matplotlib教程] 02 折线图、柱状图、散点图教程

基于MFCC和CNN的语音情感识别 2 折线图、柱状图、散点图2.1 折线图2.1.1 简单折线图2.1.1 线形和Markevery2.1.2 带误差棒的折线图2.1.3 区间填充和透明度 2.2 柱状图2.2.1 分组柱状图2.2.2 堆叠柱状图2.2.3 横向柱状图 2.3 散点图 我们的网站是 菜码编程&#xff0c;我们的q群…

Altium Designer(AD)百度云下载与安装(附安装步骤)

在我们日常使用当中&#xff0c;Altium designer常常也被简称为AD&#xff0c;是一款一体化的电子产品开发系统软件&#xff0c;主要运行在Windows操作系统上。 我们通过Altium designer把原理图设计、电路仿真、PCB绘制编辑、拓扑逻辑自动布线、信号完整性分析和设计输出等技…

毕业设计选题:基于ssm+vue+uniapp的捷邻小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

多层感知机paddle

多层感知机——paddle部分 本文部分为paddle框架以及部分理论分析&#xff0c;torch框架对应代码可见多层感知机 import paddle print("paddle version:",paddle.__version__)paddle version: 2.6.1多层感知机&#xff08;MLP&#xff0c;也称为神经网络&#xff0…

web基础—dvwa靶场(十)XSS

XSS(DOM) 跨站点脚本&#xff08;XSS&#xff09;攻击是一种注入攻击&#xff0c;恶意脚本会被注入到可信的网站中。当攻击者使用 web 应用程序将恶意代码&#xff08;通常以浏览器端脚本的形式&#xff09;发送给其他最终用户时&#xff0c;就会发生 XSS 攻击。允许这些攻击成…

【3D打印】使用simplify 3D切片更改Gcode手动断电续打、掉电、未打完继续打印、补救

一、问题描述 有些时候会遇到3D打印机没料但机器还在继续打、掉电重启后未正常恢复打印、挤出机端没有料但断料检测未触发等情况。我们又不想打印放弃&#xff0c;但又想继续之前的进度打印。 这时候我们需要更改3D打印文件的Gcode参数来进行继续打印。 至于什么是Gcode&…

SQL - 基础语法

SQL作为一种操作命令集, 以其丰富的功能受到业内人士的广泛欢迎, 成为提升数据库操作效率的保障。SQL Server数据库的应用&#xff0c;能够有效提升数据请求与返回的速度&#xff0c;有效应对复杂任务的处理&#xff0c;是提升工作效率的关键。 由于SQL Servers数据库管理系统…

【秋招笔试-支持在线评测】8.28华为秋招(已改编)-三语言题解

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 大厂实习经历 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 华为专栏传送🚪 -> 🧷华为春秋招笔试 目前今年秋招的笔…

一文彻底搞懂大模型 - OpenAI o1(最强推理模型)

最近这一两周看到不少互联网公司都已经开始秋招提前批面试了。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些…

数据清洗-缺失值填充-K-NN算法(K-Nearest Neighbors, K-NN算法)

目录 一、安装所需的python包二、采用K-NN算法进行缺失值填充2.1代码&#xff08;完整代码关注底部微信公众号获取&#xff09;2.2以某个缺失值数据进行实战2.2.1代码运行过程截屏&#xff1a;2.2.2填充后的数据截屏&#xff1a; 三、K 近邻算法 (K-Nearest Neighbors, KNN) 介…

Docker 华为云镜像加速器配置

​​ 操作说明 1. 安装/升级容器引擎客户端 推荐安装1.11.2以上版本的容器引擎客户端 2. 加速器地址 访问华为云容器镜像服务&#xff1a;https://console.huaweicloud.com/swr/ 获取加速器地址 https://xxxxxxxxx.mirror.swr.myhuaweicloud.com3. 配置镜像加速器 针对…

音频左右声道数据传输_2024年9月6日

如下为音频数据传输标准I2S总线的基本时序图 I2S slave将I2S master发送来的左右声道的串行数据DATA转变为16bit的并行数据 WS为左右声道选择信号&#xff0c;WS高代表左声道&#xff0c;WS低代表右声道; WS为高和为低都持续18个周期&#xff0c;前面16个周期用来传输数据。 I2…

2024年华为杯数学建模研赛(C题) 建模解析| 磁芯损耗建模 | 小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮2000人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;实现综合建模。独创复杂系统视角&#xff0c;帮助你解决研赛的难关呀。 完整内容可…

python-SZ斐波那契数列/更相减损数

一&#xff1a;SZ斐波那契数列题目描述 你应该很熟悉斐波那契数列&#xff0c;不是吗&#xff1f;现在小理不知在哪里搞了个山寨版斐波拉契数列&#xff0c;如下公式&#xff1a; F(n) { $\ \ \ \ \ \ \ \ \ \ \ \ $ a,( n1) $\ \ \ \ \ \ \ \ \ \ \ \ $ b,( n2) $\ \ \ \ \ \ …

STM32 通过 SPI 驱动 W25Q128

目录 一、STM32 SPI 框图1、通讯引脚2、时钟控制3、数据控制逻辑4、整体控制逻辑5、主模式收发流程及事件说明如下&#xff1a; 二、程序编写1、SPI 初始化2、W25Q128 驱动代码2.1 读写厂商 ID 和设备 ID2.2 读数据2.3 写使能/写禁止2.4 读/写状态寄存器2.5 擦除扇区2.6 擦除整…

React组件如何暴露自身的方法

一、研究背景 最近遇到一个如何暴露React组件自身方法的问题。在某些时候&#xff0c;我们需要调用某个组件内部的方法以实现某个功能&#xff0c;因此我们需要了解如何暴露组件内部API的方法。 二、实践过程 本文主要介绍React组件暴露子组件API的方法&#xff0c;以下是实…

C++【类和对象】(一)

文章目录 前言1.类的定义1.1类定义格式1.2 访问限定符1.3 类域 2. 实例化2.1 实例化的概念2.2 对象大小 3.this指针结语 前言 在前文我们讲解了C基础语法知识。本文将会讲解C的类和对象。 1.类的定义 1.1类定义格式 class name {}&#xff1b;class为定义类的关键字&#x…