element plus表格合并行

news2024/12/26 22:36:25
/**
 * 合并相同数据,导出合并列所需的方法(只适合el-table)
 */
export function getRowSpanMethod(data, rowSpanArray) {
  /**
   * 要合并列的数据
   */
  const rowSpanNumObject = {};

  //初始化 rowSpanNumObject
  rowSpanArray.map((item) => {
    rowSpanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);
    rowSpanNumObject[`${item}-index`] = 0;
  });
  //计算相关的合并信息
  for (let i = 1; i < data.length; i++) {
    rowSpanArray.map((key) => {
      const index = rowSpanNumObject[`${key}-index`];
      if (data[i][key] === data[i - 1][key]) {
        rowSpanNumObject[key][index]++;
      } else {
        rowSpanNumObject[`${key}-index`] = i;
        rowSpanNumObject[key][i] = 1;
      }
    });
  }

  //提供合并的方法并导出
  const spanMethod = function ({ row, column, rowIndex, columnIndex }) {
    if (rowSpanArray.includes(column["property"])) {
      const rowspan = rowSpanNumObject[column["property"]][rowIndex];
      if (rowspan > 0) {
        return { rowspan: rowspan, colspan: 1 };
      }
      return { rowspan: 0, colspan: 0 };
    }
    return { rowspan: 1, colspan: 1 };
  };

  return spanMethod;
}

新建一个工具js复制上面代码,然后引用

import { getRowSpanMethod } from "@/utils/use_span_method.js";

在el-table中设置方法,核心就是:span-method="spanMethod",span-method是element-plus中的合并表格的方法,但是合并的方法有点简陋,是根据奇偶分的,不满足需求,这里我是要将同一个组的“合计请款量(月)”合并

<el-table :data="tableData.arr" :span-method="spanMethod" border style="width: 100%">
      <el-table-column prop="area" label="区域" />
      <el-table-column prop="group" label="设备分组(售楼部)" />
      <el-table-column prop="name" label="设备名称" />
      <el-table-column prop="number" label="请款数量(月)" />
      <el-table-column prop="numberAll" label="合计请款量(月)" />
      <el-table-column prop="time" label="接入时间" />
    </el-table>

具体长这样

最后调用方法,并传入参数getRowSpanMethod(对象数组,[需要合并的字段])

const spanMethod = getRowSpanMethod(tableData.arr,['numberAll'])

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

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

相关文章

Informatica使用操作流程--聚合、表达式转换、查找、排序组件的使用 案例3

一、需求&#xff1a; 将oracle数据库的scott用户源表items 直抽至 EDW层 EDW_items。数据存储到oracle的edw01用户下 数据抽取至EDW层做聚合转换 求各供应商 min(price),avg(price),max(price),sum(price), 2*avg(price) 根据供应商id去供应商表查找供应商名称 查验…

【Java核心知识】idea项目编译错误排查思路

文章目录 idea项目编译错误排查思路一个项目是如何运行的项目编译报错时排查常见思路 idea项目编译错误排查思路 一个项目是如何运行的 在开始之前&#xff0c;我们需要知道idea对一个项目是如何维护和运行的&#xff1f;idea会把用户自定义配置放在.idea文件夹中&#xff0c…

LeetCode:2. 两数之和

这个解题思路来自代码随想录&#xff1a;代码随想录 (programmercarl.com) class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {std::unordered_map <int,int> map;for(int i 0; i < nums.size(); i) {// 遍历当前元素&am…

ME21N 采购订单屏幕增强

1、业务需求 采购订单行项目新增“图号”和“价格类型”字段。其中图号只查询底表展示&#xff0c;不做修改&#xff1b;价格类型做下拉框&#xff1b; 2、增强实现 增强标准表EKPO结构CI_EKPODB。抬头增加字段则修改EKKO结构CI_EKKODB 增强点CMOD&#xff1a;MM06E005 出口…

Redis7--基础篇1(概述,安装、卸载及配置)

1. Redis概述 1.1 什么是Redis Redis&#xff1a;REmote Dictionary Server&#xff08;远程字典服务器&#xff09; Remote Dictionary Server(远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数…

运营岗位需要一个内部知识库吗?

在运营岗位中&#xff0c;一个内部知识库是非常有价值的。运营岗位涉及到许多不同的任务和责任&#xff0c;需要掌握大量的专业知识和最佳实践。一个内部知识库可以帮助运营团队更好地管理和共享这些知识&#xff0c;提高工作效率和质量。 内部知识库对运营岗位的价值和应用场…

Eclipse安装FTP连接工具

查看Eclipse版本 Eclipse 安装串口终端工具_哭哭啼的博客-CSDN博客 安装 选择您的版本的插件发布站点&#xff1a; 在过滤器字段中,键入"remote".选择Mobile and Device Development&#xff0c;并选择 点击"下一步",然后接受条款.它现在应该下载并安装.…

SAP物料主数据归档详解(物理删除)

平时在操作系统过程中经常会不小心创建出很多无用的物料主数据&#xff0c;但是系统只能通过MM06打上删除标记&#xff0c;但是物料最终在系统中还是可以查询到的。 相信各位大顾问们肯定被用户问过&#xff0c;有没有办法把物料或者是业务数据从物理上删除。顾问们的回答肯定…

【算法】Java-使用数组模拟单向链表,双向链表

目录 试题1&#xff1a;实现一个单链表&#xff0c;并实现以下功能&#xff1a; 试题2&#xff1a;实现一个双链表&#xff0c;并实现以下功能 思路总结&#xff1a; 什么情况下可能涉及到用数组实现链表呢&#xff1f; 在学习时了解到了可以用数组模拟链表&#xff0c;使其…

【LInux编译器gcc/g++】gcc使用方法和动静态库相关概念

目录 一.前言 二.源代码的翻译环境 三.gcc相关指令 四.动静态库 1.什么是库&#xff1f; 2.库的命名 3.库的链接方式 4.动静态链接的优缺点 5.小结 一.前言 在Windows系统上我们常用VisualStudio来进行C/C开发&#xff0c;VS并不是一款单一的软件&#xff0c;而是集成…

UI设计模式是什么?有哪些常用的?

UI设计模式是针对常见的用户界面问题提出的解决方案。当解决方案得到验证时&#xff0c;它经常被使用&#xff0c;最终演变成可重复使用的设计模式。 设计师可以根据不同的网站功能类型选择使用相应的网站UI设计模式&#xff0c;从而创建一致高效的网站UI界面。 本文推荐8种常…

选择排序——直接选择排序

直接选择排序&#xff1a;&#xff08;以重复选择的思想为基础进行排序&#xff09; 1、简述 顾名思义就是选出一个数&#xff0c;再去抉择放哪里去。 设记录R1&#xff0c;R2…&#xff0c;Rn&#xff0c;对i1&#xff0c;2&#xff0c;…&#xff0c;n-1&#xff0c;重复下…

【MMDetection】bug记录

bug1&#xff1a; if env_cfg.get(cudnn_benchmark): AttributeError: NoneType object has no attribute get 解决办法&#xff1a; 配置文件缺少了env_cfg信息&#xff0c;需要在config文件中添加&#xff0c;如以下内容&#xff1a; env_cfg dict(cudnn_benchmarkFalse…

Java 使用 EMQX 实现物联网 MQTT 通信

一、介绍 1、MQTT MQTT(Message Queuing Telemetry Transport, 消息队列遥测传输协议)&#xff0c;是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议&#xff0c;该协议构建于TCP/IP协议上&#xff0c;由IBM在1999年发布。MQTT最大优点在于&#xff…

Netty核心原理:一、基础入门-01:初入JavaIO之门BIO、NIO、AIO实战练习

文章目录 一、前言介绍1.1 BIO&#xff1a;同步阻塞I/O模式1.2 NIO&#xff1a;同步非阻塞I/O模式1.3 AIO&#xff1a;异步非阻塞I/O模式 二、代码实现2.1 工程结构2.2 BIO&#xff1a;同步阻塞I/O实现2.2.1 BIO处理器2.2.2 BIO适配器2.2.3 BIO客户端处理器2.2.4 BIO客户端2.2.…

计算机网络第五章——传输层(上)

早知如此绊人心&#xff0c;何如当初莫相识 文章目录 前言 前言 虽然说是手机和手机之间的通信但是其实是手机之间的进程和进程之间的通信&#xff0c;所以这一章主要是研究进程之间通信的问题&#xff0c;在计算机网络中有一个重要的问题&#xff0c;在进行数据通信和资源共享…

【分享】golang windows 运行报错 undefined: syscall.SIGUSR1

在跟着煎鱼大佬学习 Golang-gin的时候&#xff0c;"在优雅的重启服务篇" ,为了gin服务的热更新&#xff0c;采用了 endlessfresh的方案&#xff0c;安装endless后无法在windows本地调试,然后报错。 (优雅的重启服务-地鼠文档优雅的重启服务-我不怎么喜欢左写写&#…

linux内核模块编译方法之模块编程详解

文章目录 一、模块传参二、模块依赖三、内核空间和用户空间四、执行流五、模块编程与应用编程的比较六、内核接口头文件查询总结 本期和大家主要分享的是驱动开发内核编译过程中对于模块是如何设计的&#xff0c;进行了详细的分享&#xff0c;从模块传参、模块依赖一直到内核空…

楼顶空地适合建造气膜体育馆吗?

众所周知&#xff0c;传统建筑的荷载太大&#xff0c;出于安全考虑&#xff0c;是不适合继续在楼顶加盖传统结构体育馆的&#xff0c;但是&#xff0c;气膜体育馆作为一种装配式建筑&#xff0c;它是可以在城市高空上建造一个轻盈又新颖独特的全天候气膜馆。 气膜体育馆作为一种…

小黑自己在家尝试涮牛排,肚子又开始了新一轮的胀气,喝到了酱香拿铁并烫了纹理发型体验一把的leetcode之旅:123. 买卖股票的最佳时机 III

动态规划1 class Solution:def maxProfit(self, prices: List[int]) -> int:# 数组长度n len(prices)if n < 2:return 0# 动态规划变量# 第一次买的价格first_price prices[0]# 第一次卖的收益first_cell 0# 第二次买的价格second_price prices[0]# 第二次卖second_…