合并单元格(列)

在vue文件中对获取数据进行监听处理,获取需要合并的列

computed: {
    spanArr() {
    // tableColumn为表头信息
      if (!this.tableColumn.length) return []
      // 使用 filter 筛选出“合计”之前的对象,然后使用 map 提取 key
      let mergeCols = []; // 需要合并的列(字段)
      let foundTotal = false;
      let data = this.tableColumn
      for (let i = 0; i < data.length; i++) {
      //只对合计列之前的列进行合并,没有限制可取消
        if (data[i].value === "合计") {
          foundTotal = true;
          break;
        } else {
          mergeCols.push(data[i].key);
        }
      }
      return getMergeCells(this.tableData, this.tableColumn, mergeCols)
    }
  }

getMergeCells 公共方法:

/**
 * 分析每一列,找出所有【列】可合并(数据相同)的单元格
 * @param {Array} tableData 表数据
 * @param {Array} tableColumn 表字段/表头
 * @param {Array} mergeCols 指定合并哪些列(字段)
 * @returns
 */
export const getMergeCells = (tableData = [], tableColumn = [], mergeCols = []) => {
    const fields = tableColumn?.map(v => v.key)
    const array = []

    if (!tableData?.length || !tableColumn?.length || !mergeCols?.length) return

    // 倒叙遍历行(方便统计合并列单元格数至最上方,避免表格塌陷)
    for (let row = tableData.length - 1; row >= 0; row--) {
        array[row] = []
        for (let col = 0; col < fields.length; col++) {
            // 1.最后一行单元格不合并(初始无可对比数据)
            // 2.不在指定列(mergeCols)的单元格不合并
            // 3.空值不合并
            if (row === tableData.length - 1 || !mergeCols.includes(fields[col]) || !tableData[row][fields[col]]) {
                array[row][col] = [1, 1]
                continue
            }

            // 4.数据相同但所属父级不一致的单元格不合并
            const parentFields = mergeCols.slice(0, col) // 在指定合并列中找出所有父级
            if (mergeCols.includes(fields[col]) && parentFields?.includes(fields[col - 1])) {
                const currentParents = parentFields.map(field => tableData[row][field]) // 当前单元格所有父级
                const nextRowParents = parentFields.map(field => tableData[row + 1][field]) // 下一行单元格所有父级
                if (currentParents?.toString() !== nextRowParents?.toString()) {
                    array[row][col] = [1, 1]
                    continue
                }
            }

            // 5.合并相同数据的单元格
            // 以下方式中数据格式为数组,如若不是,可对以下代码自行调整,调整范围较小
            if (tableData[row][fields[col]][0] === tableData[row + 1][fields[col]][0]) {
                const beforeCell = array[row + 1][col]
                array[row][col] = [1 + beforeCell[0], 1]
                beforeCell[0] = 0
                beforeCell[1] = 0
            } else {
                array[row][col] = [1, 1] // 否则不合并
            }
        }
    }
    // console.log(array, 'array')
    return array
}


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

七、OSPF特殊区域及其特性

目录 OSPF区域分类 hello报文中option字段 1.末节区域&#xff08;Stub区域&#xff09; 2.完全末节区域&#xff08;Toally Stub区域&#xff09; 3.七类LSA 4.非完全末节区域&#xff08;NSSA区域&#xff09; 5.完全非完全末节区域&#xff08;Toally NSSA区域&#…

计算机服务器中了helper勒索病毒怎么办,helper勒索病毒解密流程工具

在网络技术飞速发展的今天&#xff0c;越来越多的企业离不开网络&#xff0c;网络可以为企业带来更高的生产效率&#xff0c;提供更多的便捷服务&#xff0c;但网络是一把双刃剑&#xff0c;在为人们提供便利的同时&#xff0c;也为企业的数据安全带来严重威胁。近日&#xff0…

微服务架构与SOA架构

SOA架构和微服务架构的区别 SOA关注的是服务重用&#xff0c;微服务在关注服务重用的同时&#xff0c;也同时关注快速交付&#xff1b; 微服务架构 80%的SOA服务架构思想 100%的组件化架构思想 80%的领域建模思想 首先SOA和微服务架构一个层面的东西&#xff0c;而对于ESB和…

Python_AI库 Numpy常用的统计函数介绍

Python_AI库 Numpy常用的统计函数介绍 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 熟悉表格文件的基本操作 具备基本的高等数学常识,能看得懂矩阵运算 具备自主扩展学习能力 本文涉及的函数主要包含&#xff1a; np.sum(arr…

自动化爬虫工具:you-get安装与使用

Windows下的安装命令&#xff1a; pip install you-get linux下的安装命令&#xff1a; pip3 install you-get 下载完成后&#xff0c;我们可以看到如下的警告&#xff0c;意思就是这个工具并未被添加到环境变量中&#xff0c;如果我们想在命令行中直接调用&#xff0c;需要…

人机介面、工业自动化、工业控制、机器人、充电站、智能家庭、可编程逻辑控制器 ( PLC ) 、远程终端单元 ( RTU )

影像输入支持 CCIR656 / CCIR601 输入接口最高分辨率&#xff1a;3 百万像素•双 SD Host 介面-支持 SD / SDIO / eMMC•模拟数字转换器 ( ADC )-支持 12-bit 8 通道-800 k 采样率 ( SPS )-支持四线或五线式电阻式触摸板•周边-支持 SPI / IC / PWM / CAN / ISO-7816

【推荐】程序员的免费羊毛!!!

还剩下最后两天了&#xff0c;最后这两天抽奖命中率特别高&#xff0c;基本中奖99.99% 有大量日历、数码电子产品。 点击链接参与「通义灵码 体验 AI 编码&#xff0c;开 AI 盲盒」 https://developer.aliyun.com/topic/lingma/activities/202403?taskCode14508&recor…

振弦采集仪在岩土工程监测中的误差分析及提高措施探讨振弦

振弦采集仪在岩土工程监测中的误差分析及提高措施探讨 振弦采集仪是岩土工程监测中常用的一种测量设备&#xff0c;广泛应用于地基沉降、岩土体固结、地下水位变化等监测工作中。然而&#xff0c;在实际应用中&#xff0c;振弦采集仪可能存在一些误差&#xff0c;影响监测结果…

Linux动态追踪——eBPF

目录 摘要 1 什么是 eBPF 2 eBPF 支持的功能 3 BCC 4 编写脚本 5 总结 6 附 摘要 ftrace 和 perf 与 ebpf 同为 linux 内核提供的动态追踪工具&#xff0c;其中 ftrace 侧重于事件跟踪和内核行为的实时分析&#xff0c;perf 更侧重于性能分析和事件统计&#xff0c;与…

unit4.web服务的部署及高级优化方案

搭建web服务器要求如下&#xff1a; 1.web服务器的主机ip&#xff1a;172.25.254.100 [rootserver101 桌面]# vmset.sh 100 连接已成功激活&#xff08;D-Bus 活动路径&#xff1a;/org/freedesktop/NetworkManager/ActiveConnection/3&#xff09; [rootserver101 桌面]# ifc…

jsp servlet 学生信息管理系统

一、角色划分 1、超级管理员 2、学生 二、模块展示 1、登录 2、列表页面【超级管理员展示所有用户信息、学生只展示当前登录用户信息】 3、新增 4、编辑 三、数据库【mysql】 四、运行演示 jsp servlet 学生信息管理系统

【数据结构5-树和二叉树-森林-哈夫曼树】

目录 1 树1.1 树的描述&#xff08;基本术语&#xff09; 2 二叉树&#xff08;树的度最大为2&#xff09;2.1 注意事项-五种基本形态2.2 二叉树的抽象数据类型定义 3 二叉树的性质3.1 两种特殊形式的二叉树-重点会计算3.2 题目练习&#xff1a; 4 二叉树的存储结构4.1 顺序存储…

opencv基础篇 ——(九)图像几何变换

图像几何变换是通过对图像的几何结构进行变换来改变图像的形状、大小、方向或者透视关系。常见的图像几何变换包括缩放、旋转、平移、仿射变换和透视变换等。下面对这些几何变换进行简要介绍&#xff1a; 矩阵的转置&#xff08;transpose &#xff09;&#xff1a; 对于图像来…

Hot100-哈希法

1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 在做面试题目的时候遇到需要判断一个元素是否出现过的场景应该第一时间想到哈希法 class Solution {public int[] twoSum(int[] nums, int target) {int[] result new int[2];for (int i 0; i < nums.length;i){for…

性能监控数据(本地、服务器)

CPU、内存、磁盘等的监控 一、mac本地性能监控 1. top 终端&#xff1a; top load Avg: 平均负载(1分钟&#xff0c;5 分钟&#xff0c;15 分钟)值不能超过 4&#xff0c;要不然就是超负荷运行 Tasks: 进程数 %Cpu(s): idle :剩余百分比 KiB Mem: free:剩余内存&#xff0…

Rancher-Longhorn-新增磁盘以及卷创建原理和卷副本调度规则

一、添加磁盘-官网指引 重点在于&#xff1a; 1、比如你新增了一块盘&#xff0c;你需要做一下事情&#xff1a; 1、执行 lsblk 能找到你的盘。 2、然后执行 fdisk /dev/sdxx 分区你的盘。 3、然后对于分区部署文件系统&#xff0c; mkfs.xfs 4、然后执行 mount /dev/sdxxx 你…

【每日刷题】Day25

【每日刷题】Day25 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 2. 82. 删除排序链表中的重复…

数据结构练习:链表扩容

大致步骤&#xff1a; 一&#xff1a;创建一个新链表&#xff0c;遍历原链表的同时&#xff0c;将原链表的值复制给新链表 二&#xff1a;将新链表插入到原链表中&#xff08;大致如下&#xff09; 注&#xff1a; 1.头结点是不存有数据的 2.记得malloc后要free 3.*&是…

uniapp真机调试无法调用之前页面的方法

在uniapp通过getCurrentPages&#xff08;&#xff09;页面栈调用之前页面方法&#xff0c;h5可生效但app真机调试找不到方法 let pages getCurrentPages()let beforePage pages[pages.length - 3]beforePage.refresh() //真机调试refresh为undefined解决&#xff1a; 后面…

5G前传光纤传输的25G光模块晶振SG2016CAN

一款适用于5G前传光纤传输网络中的25G光模块的5G晶振SG2016CAN。随着5G时代的到来&#xff0c;5G晶振的重要性也不言而喻&#xff0c;小体积宽温晶振SG2016CAN可以用于5G前传的25G光模块&#xff0c;具有高稳定性、小体积、宽温等优势。在5G前传光纤传输网络中&#xff0c;25G光…