vue中el-table合并单元格

1.在el-table中添加 :span-method=“handdelSpanMethod”
2.handdelSpanMethod方法

 //历史单特殊计量合并企业名称相同的第一列
      handdelSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) { // 企业名称相同时,合并第一列
          const prevRow = this.specilHislList[rowIndex - 1];
          if (prevRow && row.userName === prevRow.userName) {
            return {
              rowspan: 0,
              colspan: 1
            };
          } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < this.specilHislList.length; i++) {
              if (this.specilHislList[i].userName === row.userName) {
                rowspan++;
              } else {
                break;
              }
            }
            return {
              rowspan,
              colspan: 1
            };
          }
        }
  
     /*****当mergeId为空时不合并******/
      if (columnIndex === 17) { // 合并第17列,即合计列
          const mergeId = row.mergeId;
          if (mergeId === null) {
            // 如果 mergeId 为 null,返回 1,表示不合并
            return [1, 1];
          }

          // 判断当前行和上一行的 mergeId 是否相同
          const prevRow = this.specilTotallList[rowIndex - 1];
          if (prevRow && prevRow.mergeId === mergeId) {
            // 如果上一行 mergeId 与当前行相同,则合并单元格,返回 [0, 0] 表示合并
            return [0, 0];
          } else {
            // 否则,不合并,返回 [1, 1] 表示当前单元格占用一行一列
            let rowspan = 1;
            // 向下查找连续相同 mergeId 的行数
            for (let i = rowIndex + 1; i < this.specilTotallList.length; i++) {
              if (this.specilTotallList[i].mergeId === mergeId) {
                rowspan++;
              } else {
                break;
              }
            }
            return [rowspan, 1];  // 设置 rowspan
          }
        }

        // 其他列不做处理,返回默认值
        return [1, 1];
      },
      },

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

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

相关文章

React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo

文章目录 项目地址十六、useContecxt十七、useReducer十八、React.memo以及产生的问题18.1组件嵌套的渲染规律18.2 React.memo18.3 引出问题 十九、useCallback和useMemo19.1 useCallback对函数进行缓存19.2 useMemo19.2.1 基本的使用19.2.2 缓存属性数据 19.2.3 对于更新的理解…

【漏洞复现】|百易云资产管理运营系统/mobilefront/c/2.php前台文件上传

漏洞描述 湖南众合百易信息技术有限公司&#xff08;简称&#xff1a;百易云&#xff09;成立于2017年是一家专注于不动产领域数字化研发及服务的国家高新技术企业&#xff0c;公司拥有不动产领域的数字化全面解决方案、覆盖住宅、写字楼、商业中心、专业市场、产业园区、公建、…

远程控制软件:探究云计算和人工智能的融合

在数字化时代&#xff0c;远程控制工具已成为我们工作与生活的重要部分。用户能够通过网络远程操作和管理另一台计算机&#xff0c;极大地提升了工作效率和便捷性。随着人工智能&#xff08;AI&#xff09;和云计算技术的飞速发展&#xff0c;远程控制工具也迎来了新的发展机遇…

漫谈 module caching——PyCharm jupyter notebook 在导入模块被更新后无法及时同步问题

目录 引子&#xff1a;问题的发现何为 module caching见微知著&#xff1a;Python 中的缓存机制参考链接 引子&#xff1a;问题的发现 近日笔者用 PyCharm 创建了一个项目时不经意间发现了这个问题&#xff1a;事情发生在调试 Jupyter Notebook 的过程中。当笔者修改了自己编写…

企业数字化转型现状

国家数字经济战略背景 2018年以来&#xff0c;国家政府不断出台政策规范我国企业数字化治理市场。2018年9月颁布《关于发展数字经济稳定并扩大就业的指导意见》&#xff0c;支持建设一批数字经济创新创业孵化机构。积极推进供应链创新与应用&#xff0c;支持构建以企业为主导。…

《Python基础》之算数、比较、赋值、逻辑、位运算符

目录 简介 Python中常见的运算符 1、算数运算符 2、比较运算符 3、赋值运算符 4、逻辑运算符 5、位运算符 总结 简介 Python 提供了多种运算符&#xff0c;用于执行各种操作&#xff0c;包括算术运算、比较运算、逻辑运算、位运算、赋值运算等。以下是 Python 中常用的…

学习threejs,使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点&#xff1a;仅考虑所给样例&#xff0c;会误以为H和W两人的装车时间是一一对应的&#xff0c;那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…

道品智能科技移动式水肥一体机:农业灌溉施肥的革新之选

在现代农业的发展进程中&#xff0c;科技的力量正日益凸显。其中&#xff0c;移动式水肥一体机以其独特的可移动性、智能化以及实现水肥一体化的卓越性能&#xff0c;成为了农业领域的一颗璀璨新星。它不仅改变了传统的农业灌溉施肥方式&#xff0c;更为农业生产带来了高效、精…

【PCB设计】AD16教程:分配位号

1、前提条件 确保已经基本画完原理图 2、点击【Tools-Annotate Schematics】 3、依次点击【Reset All】、【Update Changes Lise】、【Close】 最后位号就被自动分配好了

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本 2024/11/25 15:59 20241125编译友善之臂的NanoPi R3S开发板【RK3566】精简步骤 2024/11/25 19:37 viewproviewpro-ThinkBook-16-G5-IRH:~$ viewproviewpro-ThinkBook-16-G5-IRH:~$ df -h viewproviewpro-T…

uniapp实际开发遇到过的问题(持续更新中....)

1. 在ios模拟器上会出现底部留白的情况 解决方案&#xff1a; 在manifest.json文件&#xff0c;找到开源码视图配置&#xff0c;添加如下&#xff1a; "app-plus" : {"safearea":{"bottom":{"offset" : "none" // 底部安…

计算机网络:应用层知识点概述及习题

网课资源&#xff1a; 湖科大教书匠 1、概述 习题1 1 在计算机网络体系结构中&#xff0c;应用层的主要功能是 A. 实现进程之间基于网络的通信 B. 通过进程之间的交互来实现特定网络应用 C. 实现分组在多个网络上传输 D. 透明传输比特流 2 以下不属于TCP/IP体系结构应用层范畴…

数据治理:在企业数据管理中的关键角色与实现路径——《DAMA 数据管理知识体系指南》读书笔记- 第 3 章

文章目录 1. 数据治理的核心内涵与战略价值2. 数据治理的驱动因素&#xff1a;不仅仅是合规3. 数据治理的组织模型&#xff1a;选择适合企业结构的运营模式4. 实施数据治理的关键步骤&#xff1a;战略、制度和文化5. 数据治理工具的选择&#xff1a;支持业务与流程的高效管理6.…

递推概念和例题

一、什么是递推 递推算法以初始值为基础&#xff0c;用相同的运算规律&#xff0c;逐次重复运算&#xff0c;直至求出问题的解&#xff0c;它的本质是按照固定的规律逐步推出&#xff08;计算出&#xff09;下一步的结果 这种从“起点”重复相同的的方法直至到达问题的解&…

【Android】RecyclerView回收复用机制

概述 RecyclerView 是 Android 中用于高效显示大量数据的视图组件&#xff0c;它是 ListView 的升级版本&#xff0c;支持更灵活的布局和功能。 我们创建一个RecyclerView的Adapter&#xff1a; public class MyRecyclerView extends RecyclerView.Adapter<MyRecyclerVie…

websocket是什么?

一、定义 Websocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它允许服务器主动向客户端推送数据&#xff0c;而不需要客户端不断的轮询服务器来获取数据 与http协议不同&#xff0c;http是一种无状态的&#xff0c;请求&#xff0c;响应模式的协议(单向通信)&a…

已存大量数据的mysql库实现主从各种报错----解决方案

背景何谓“先死后生”本文使用技术1、实施流程图2、实施2.1、数据库备份2.2、搭建Mysql的Master-Slave2.2.1、准备工作2.2.2、开始部署2.2.3、账号配置2.2.4、slave 同步配置2.2.5、验证 2.3、Master做数据恢复 结语 背景 计划对已有大量数据的mysql库的主从搭建&#xff0c;使…

SAP 零售方案 CAR 系统的介绍与研究

前言 当今时代&#xff0c;零售业务是充满活力和活力的业务领域之一。每天&#xff0c;由于销售运营和客户行为&#xff0c;它都会生成大量数据。因此&#xff0c;公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…

模电复习易错题

PN 结&#xff1a;PN 结是由 P 型半导体和 N 型半导体通过特殊工艺结合在一起形成的结构。P 型半导体中多子是空穴&#xff0c;N 型半导体中多子是电子。内建电场&#xff1a;在 PN 结形成时&#xff0c;由于 P 区和 N 区载流子浓度的差异&#xff0c;会在结区形成一个内建电场…