el-table合并行

news2024/12/29 2:37:23

需求:

1、”用户任务“中的”代码“需要按照升序进行排列;
2、”用户任务“中连续的”会签“是共用一个序号,并且序号进行合并

效果

在这里插入图片描述

解决方法

列表排序一般是前端传值,后端进行排序。由于后端返回的表格列表没有 序号indexNum 这个字段,我是自己做的一个处理去进行添加,方便后续相同序号的合并

--ListTable.ts--
// 获取表格列表以及添加序号indexNum
  search(resetPaging: boolean) {
    if (resetPaging) {
      this.paging.page = 1;
    }
    let params = this.buildFilter();
    let loading = this.$loading(ConstantMgr.loadingOption);
    UserTaskInsApi.query(params)
      .then((res) => {
        if (res.success) {
          let dataList = res.data!;
          this.index = 1;
          this.tempIndex = 0;
          dataList.forEach((item: any, index) => {
            if (index === 0) {
              item.indexNum = this.index;
              this.tempIndex = this.index;
              this.index++;
              this.temp = item;
            } else {
              if (item.bpmUserTaskDefinitionId !== this.temp.bpmUserTaskDefinitionId) {
                item.indexNum = this.index;
                this.tempIndex = this.index;
                this.index++;
              } else {
                item.indexNum = this.tempIndex;
              }
            }
            // this.index++;
            this.temp = item;
          });
          this.records = dataList;
          console.log('records=>', this.records);
        }
      })
      .catch((err) => {
        this.$message.error(err.message);
      })
      .finally(() => {
        loading.close();
      });
  }

// 相同序号进行合并
  onMergeLines(records) {
    this.spanArr = [];
    this.position = 0;
    records.forEach((item, index) => {
      if (index === 0) {
        this.spanArr.push(1);
        this.position = 0;
      } else {
        if (records[index].indexNum === records[index - 1].indexNum) {
          this.spanArr[this.position] += 1; // 合并行
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.position = index;
        }
      }
    });
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) { // 如果是第一列也就是序号那列就进行合并
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  }



--ListTable.vue--

 <el-table  :data="records" :span-method="objectSpanMethod" ……>
     ……
  </el-table>

推荐资料 :https://element.eleme.cn/#/zh-CN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1267779.html

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

相关文章

【华为数通HCIP | 网络工程师】821刷题日记-BFD和VRRP 及重点(2)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

jmeter多个接口测试

针对接口文档&#xff0c;进行对应接口设计&#xff0c;多个接口设计用例需要使用事物控制器。 1.通过登录接口提取sign值 发送一个登录请求&#xff0c;然后通过正则表达式提取该sign值 正则表达式的使用&#xff0c;我稍后会在下一个博文中详细说明&#xff0c;这边就不多说…

算法中的时间复杂度,空间复杂度

一、前言 算法&#xff08;Algorithm&#xff09;是指用来操作数据、解决程序问题的一组方法。对于同一个问题&#xff0c;使用不同的算法&#xff0c;也许最终得到的结果是一样的&#xff0c;但在过程中消耗的资源和时间却会有很大的区别 衡量不同算法之间的优劣主要是通过时…

量子芯片:引领计算技术的新篇章

量子芯片:引领计算技术的新篇章 引言 随着量子计算的飞速发展,量子芯片作为量子计算机的核心组件,日益受到人们的关注。量子芯片的出现,不仅有望推动计算技术的革新,更将在信息安全、药物研发、金融投资等领域掀起巨大的变革。在本篇博客中,我们将深入探讨量子芯片的原理…

windows环境下载安装Nginx并配置防火墙

1、下载Nginx Nginx官网 下载稳定版 2、下载之后&#xff0c;解压 3、启动Nginx&#xff0c;命令&#xff1a;start nginx 最小化该窗口 主要&#xff0c;不要关闭&#xff0c;如果关闭&#xff0c;表示nginx服务关闭了 4、测试是否启动成功 在浏览器中输入http://localhos…

2023.11.26使用opencv调节图片亮度

2023.11.26使用opencv调节图片亮度 测试一些opencv对图片的处理效果&#xff0c;方法比较简单&#xff0c;找出所有像素点&#xff0c;然后将RGB三色的亮度分别进行调节即可&#xff0c;同类可以进行像素级的处理。测试结果和项目代码如下&#xff1a; 使用OpenCV调节图拍亮…

测试必会+面试必问--fiddler参数详解

Fidder抓包是作为测试必须掌握的一项技能。 这篇详细介绍&#xff08;保姆级&#xff09;Fiddler在测试中常用的功能。 全文较长&#xff08;6000字&#xff09;&#xff0c;建议先收藏&#xff0c;需要时再食用。 一、界面简介 先看一下完整的Fiddler界面布局 Fiddler界面…

微信发红包,有哪些测试点

1、功能 1.在红包钱数&#xff0c;和红包个数的输入框中只能输入数字 2.红包里最多和最少可以输入的钱数 200 0.01 3.拼手气红包最多可以发多少个红包 100 3.1超过最大拼手气红包的个数是否有提醒 4.当红包钱数超过最大范围是不是有对应的提示 5.当发送的红包个数超过…

Kubernetes技术与架构-安全性

本文主要从不同层面与多个维度描述Kubernetes技术与架构的安全性。 云原生的安全性 从系统分层架构的角度分析&#xff0c;自底向上&#xff0c;云原生的安全性主要包括云、集群、容器以及代码四个层面&#xff0c;简称云原生4C安全&#xff0c;其架构图如下所示&#xff1a;…

express+multer实现简单的文件上传功能

expressmulter实现简单的文件上传功能 1.安装multer和uuid依赖 cnpm install -S uuid multer2.添加multer的配置文件 在config文件夹下添加uploa.js文件&#xff0c;内容如下&#xff1a; // 引入multer const multer require(multer) // uuid : 用于生成不重复的由英文组…

第20 章 多线程

20.1线程简介. 20.2创建线程 2.1继承Thread类 Thread 类是java.lang包中的一个类&#xff0c;从这个类中实例化的对象代表线程&#xff0c;程序员启动一个新线程需要建立Thread 实例。Thread类中常用的两个构造方法如下: public Thread():创建一个新的线程对象。 public Threa…

BTCPay Server:免费、安全、开源的比特币支付处理器 | 开源日报 No.90

MunGell/awesome-for-beginners Stars: 58.0k License: NOASSERTION 这个项目是一个收集开源项目的列表&#xff0c;旨在帮助初学者找到可以贡献代码的机会。该列表按编程语言分类&#xff0c;并列出了每个项目以及其标签 (如 “good-first-issue”、“beginner” 等)。主要功…

宇宙中可能存在的另外一种生命体-硅基生命

本文提到的所有图片有燧原曜图平台生成提供 概念 碳基&#xff1a;生命的组织架构由碳元素组成&#xff08;地球的生命&#xff09;硅基&#xff1a;生命的组织架构由硅元素组成 引言 费米悖论 中提到有存在外星文明的可能&#xff0c;但它们迄今为止还无法和我们接触三体人…

【Java】文件路径-绝对路径与相对路径

1、绝对路径与相对路径 先来看一下绝对路径和相对路径的定义&#xff1a; 绝对路径是指完整的描述文件位置的路径就是绝对路径。如Windows系统中的D:\Project\data\test.txt&#xff0c;MAC系统中的/Users/liuwenwen/Desktop/Project/test.txt 相对路径是指相对于当前文件位置…

nodejs最新电商jd m端h5st 4.2签名算法4.2版本逆向,jd API接口,jd商品数据采集

前言&#xff1a; jd m端使用最新的h5st 4.2签名算法&#xff0c;与h5st 4.1版本有很大的不同。在这儿分析一下&#xff0c;供大家参考。 一、目标地址(Base64解码) aHR0cHM6Ly9zby5tLmpkLmNvbS93YXJlL3NlYXJjaC5hY3Rpb24/a2V5d29yZD0lRTklOTklQTQlRTYlQjklQkYlRTYlOUMlQkEmc2…

云性能监控的关键组成部分

云性能监控是确保云服务稳定运行的不可或缺的一环。通过实时可见性、资源优化和快速故障排除&#xff0c;企业可以最大程度地利用云服务的优势&#xff0c;提高业务的可用性和效率。采用综合的监控策略和最佳实践&#xff0c;企业可以更好地应对日益复杂和变化的云环境&#xf…

最强Oracle 19c OCM考试错题解析

参加过Oracle 19c OCM考试的学员都知道&#xff0c;OCM考试结束后会告诉考生考试成绩是多少分&#xff0c;但并不会告诉考生哪道题做错了&#xff0c;就考试问题&#xff0c;姚远老师会总结一些文章出来&#xff0c;欢迎关注。 最近姚远老师在OCM的授课中发现了一道题目&#x…

1-2、计算机组成

语雀原文链接 文章目录 1、计算机组成1-1、主板1-2、接口卡1-3、存储器&#xff08;内存&#xff09; 2、存储器2-1、存储器的重要性2-2、物理存储器2-3、逻辑存储器2-4、内存地址空间的分段2-5、存储单元2-6、指令和数据 3、总线3-1、三类总线3-2、CPU读数据例子3-3、CPU写数…

SVG图片选择库组件封装及使用

需求 需求&#xff1a; 在项目中通常需要做菜单管理&#xff0c;想要让左侧菜单好看一点&#xff0c;一般都会选择添加图标&#xff0c;需要自定义选择喜欢的图标&#xff0c;得提供一个有选择项的图标库 延伸需求&#xff1a;在项目中通常可能有好几个图标选择库&#xff0c;可…

【星火大模型】api使用

讯飞星火官方首页 准备工作 注册讯飞星火账号申请开发者api试用 从一个demo开始 讯飞星火官方的程序员为我们提供了非常优秀的demo&#xff0c;基本涵盖了大多数常用语言。 demo下载链接 这里我选用Java带上下文调用示例 下载后可以看到这是一个idea项目&#xff0c;直接…