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

news2024/11/16 1:28:56

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

后端返回的数据格式:

html: 

<el-tab-pane label="执行记录概览" name="fourth" v-loading="loading">
          <el-timeline v-if="recordList.length > 0">
            <el-timeline-item
              v-for="(item, index) in recordList"
              :key="index"
              :timestamp="item.createTime"
              placement="top"
            >
              <el-card>
                <el-tabs
                  v-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-column
                        align="center"
                        type="index"
                        label="序号"
                      /> -->
                      <el-table-column
                        prop="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.coloradmin.cn/o/2151175.html

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

相关文章

单元测试和unittest框架(超详细总结)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 单元测试的定义 1. 什么是单元测试&#xff1f; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&am…

电子烟智能化创新体验:WTK6900P语音交互芯片方案,融合频谱计算、精准语音识别与流畅音频播报

一&#xff1a;开发背景 在这个科技日新月异的时代&#xff0c;每一个细节的创新都是对传统的一次超越。今天&#xff0c;我们自豪地宣布一项革命性的融合——将先进的语音识别技术与电子烟相结合&#xff0c;通过WTK6900P芯片的卓越性能&#xff0c;为您开启前所未有的个性化…

【有啥问啥】摄像头成像质量量化标准解读与测试方法

摄像头成像质量量化标准解读与测试方法 在自动驾驶和智能驾驶舱领域&#xff0c;摄像头是关键的感知设备&#xff0c;直接关系到系统的环境感知能力。为确保摄像头在实际应用中表现出色&#xff0c;需明确了解其成像质量标准和测试方法。本文将围绕成像质量的核心指标、测试方…

【机器学习(九)】分类和回归任务-多层感知机 (MLP) -Sentosa_DSML社区版

文章目录 一、算法概念二、算法原理&#xff08;一&#xff09;感知机&#xff08;二&#xff09;多层感知机1、隐藏层2、激活函数sigma函数tanh函数ReLU函数 3、反向传播算法 三、算法优缺点&#xff08;一&#xff09;优点&#xff08;二&#xff09;缺点 四、MLP分类任务实现…

PCL addLine可视化K近邻

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09; 一、概述 本文将介绍如何使用PCL库中…

前端实用工具(二):编程规范化解决方案

目录 本地代码规范化工具 代码检测工具ESLint 代码格式化工具Prettier 远程代码规范化工具 远程提交规范化工具commitizen 提交规范检验工具commitlint husky 什么是git hooks commitlint安装 husky安装 检测代码提交规范 ESLint husky 自动修复格式错误lint-staged…

前缀和与差分(二维)

二维前缀和 下面是一个二维数组&#xff0c;我们要求&#xff08;1&#xff0c;1&#xff09;到&#xff08;2&#xff0c;2&#xff09;区间内的所有元素的和&#xff0c;最原始的方法就是遍历每个元素然后一个一个加起来&#xff0c;此时时间复杂度为O(n*m)。 我们之前学过…

华为---代理ARP工作过程示例分析

目录 1. 示例场景 2. 基本配置 3. 配置代码 4. 测试验证 5. 抓包分析 5.1 在代理ARP环境下PC1和PC2通信分析 5.2 取消代理ARP环境下PC1和PC2通信分析 【1】取消R1路由器GE 0/0/1端口ARP代理 【2】取消R2路由器GE 0/0/1端口ARP代理 1. 示例场景 如上图所示&#xff0c;…

Python 中的方法解析顺序(MRO)

在 Python 中&#xff0c;MRO&#xff08;Method Resolution Order&#xff0c;方法解析顺序&#xff09;是指类继承体系中&#xff0c;Python 如何确定在调用方法时的解析顺序。MRO 决定了在多继承环境下&#xff0c;Python 如何寻找方法或属性&#xff0c;即它会根据一定规则…

Ceph 基本架构(一)

Ceph架构图 Ceph整体组成 Ceph 是一个开源的分布式存储系统&#xff0c;设计用于提供优秀的性能、可靠性和可扩展性。Ceph 的架构主要由几个核心组件构成&#xff0c;每个组件都有特定的功能&#xff0c;共同协作以实现高可用性和数据的一致性。 以下是 Ceph 的整体架构及其…

【PyTorch】autograd与逻辑回归

autograd – 自动求导系统 torch.autograd autograd torch.autograd.backward 功能&#xff1a;自动求取梯度 tensor&#xff1a;用于求导的张量&#xff0c;如lossretain_graph&#xff1a;保存计算图create_graph&#xff1a;创建导数计算图&#xff0c;用于高阶求导gra…

mac安装JetBtains全家桶新版本时报错:Cannot start the IDE

mac安装JetBtains全家桶新版本时报错&#xff1a;Cannot start the IDE 前言报错信息解决方法 前言 作者使用的是Mac电脑&#xff0c;最近想要更新JetBrains相关工具的软件版本&#xff0c;但是在安装时突然报错&#xff0c;导致安装失败&#xff0c;现在将报错信息以及解决方…

API应用安全风险倍增,F5助企业赢得关键安全挑战

如今&#xff0c;API应用安全的重要性与日俱增&#xff0c;但其复杂性也达到前所未有的程度。F5公司在亚太地区发布全新研究报告《2024策略洞察&#xff1a;亚太地区API安全报告》&#xff08;以下简称为“报告”&#xff09;&#xff0c;指出亚太地区企业正愈加依赖基于人工智…

Linux 进程2

环境变量 再Linux操作系统中一切皆文件&#xff0c;这个环境变量自然也是一个文件&#xff0c;它的作用是辅助我们使用操作系统还可以辨识我们是什么用户(一般用户&#xff0c;root用户)。 env是读取完整环境变量的指令&#xff0c;里面记录了许多我登录操作系统所用的用户的信…

一文说清楚ETL与Kafka如何实现集成

ETL与Kafka为何需要集成? 随着企业对实时流数据的处理要求越来越高&#xff0c;很多企业都把实时流数(日志、实时CDC采集数据、设备数据…)先推入到kafka中&#xff0c;再通过ETL对kafka中的数据进行消费通过ETL强大的数据的转换、清洗功能来进行数据的集成与分发。 实时数据…

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

地信、测绘、遥感、地质相关岗位招聘汇总

3s等相关专业25秋招&提前批招聘信息 该岗位信息表&#xff0c;覆盖全国各大省市&#xff0c;招聘岗位主要针对地信、测绘、地质、遥感、城规等专业。 1800WebGIS开发岗位汇总表 该信息表&#xff0c;主要是WebGIS开发岗为主&#xff0c;岗位要求熟悉熟悉Openlayers&#…

【C++篇】~类和对象(中)

类和对象&#xff08;中&#xff09; 1.类的默认成员函数​ 默认成员函数就是用户没有显式实现&#xff0c;编译器会自动生成的成员函数称为默认成员函数。一个类&#xff0c;我们不写的情况下编译器会默认生成以下6个默认成员函数&#xff0c;需要注意的是这6个中最重要的是前…

YOLOv8改进系列,YOLOv8替换主干网络为PP-HGNetV2(百度飞桨视觉团队自研,助力涨点)

摘要 PP-HGNetV2(High Performance GPU Network V2) 是百度飞桨视觉团队自研的 PP-HGNet 的下一代版本,其在 PP-HGNet 的基础上,做了进一步优化和改进,最终在 NVIDIA GPU 设备上,将 “Accuracy-Latency Balance” 做到了极致,精度大幅超过了其他同样推理速度的模型。其在…

远程桌面连接工具Microsoft Remote Desktop Beta for Mac

Microsoft Remote Desktop Beta for Mac 是一款功能强大的远程桌面连接工具&#xff0c;具有以下功能特点&#xff1a; 软件下载地址 跨平台连接&#xff1a; 允许 Mac 用户轻松连接到运行 Windows 操作系统的计算机&#xff0c;打破了操作系统的界限&#xff0c;无论这些 Wi…