elementUI table表格相同元素合并行----支持多列

效果图如下:
在这里插入图片描述
vue2代码如下:
只粘贴了js方法哦,

methods: {

// 设置合并行
setrowspans() {
const columns = [‘name’, ‘value’]; // 需要合并的列名
// 为每个需要合并的列设置默认 rowspan
this.tableData.forEach(row => {
columns.forEach(col => {
row[col + ‘Rowspan’] = 1; // 例如:row[‘name1Rowspan’] = 1
});
});

columns.forEach((col, index) => {
    for (let i = 0; i < this.tableData.length; i++) {
        // 这里进行判断
        // 如果当前行的列数据和下一行的列数据相等
        // 就把当前rowspan + 1,下一行的rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
            if (this.tableData[i][col] === this.tableData[j][col]) {
                this.tableData[i][col + 'Rowspan']++;
                this.tableData[j][col + 'Rowspan']--;
            } else {
                break; // 如果不相等,跳出循环,因为已经没有相同的了
            }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i][col + 'Rowspan'] - 1;
    }
});

},

// 合并行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 根据列索引决定合并哪一列
if (columnIndex === 1 || columnIndex === 3) { // 这里可能需要调整,根据你实际的列数
return {
rowspan: row[column.property + ‘Rowspan’],
colspan: 1
};
}
}

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

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

相关文章

光电探测器性能指标测试

光电探测器的三个核心指标&#xff1a; 带宽&#xff0c;转换增益&#xff0c;噪声(信噪比&#xff0c;NEP&#xff0c;噪声密度) 测试环境&#xff1a;可调谐激光器&#xff08;CW LASER&#xff09;&#xff0c;强度调制器(AM)&#xff0c;信号发生器(AWG)&#xff0c;可调衰…

【算法】滑动窗口——最大连续1的个数

本篇文章讲的是“最大连续1的个数”这道题&#xff0c;从最开始的简单暴力到用滑动窗口算法实现解题的思路历程&#xff0c;有需要借鉴即可。 目录 1.题目2.暴力求解3.滑动窗口解法3.1优化一&#xff1a;end重返start优化&#xff0c;end指针不回退3.2优化二&#xff1a;某一st…

Day_2

1. 菜品管理 新增菜品 接口设计 1. 根据类型查询分类&#xff08;分类管理已完成&#xff09; 查看接口文档即可 2. 文件上传 创建Bucket 采用的是阿里云的OSS对象存储服务 新增AccessKey 3. 菜品的新增逻辑 代码开发 1. 文件上传接口开发 为了提高代码的解耦性&#…

Java_方法引用

方法引用就是把已经有的方法拿过来用&#xff0c;当作函数式接口中抽象方法的方法体。 条件&#xff1a; 1.引用处需要是函数式接口 2.被引用的方法需要已经存在 3.被引用的方法的形参和返回值需要跟抽象方法的形参和返回值保持一致 4.被引用方法的功能需要满足当前的要求 简…

ATA-2161高压放大器用途有哪些种类

高压放大器是一种电子设备&#xff0c;其主要功能是将输入信号放大到较高的电压水平&#xff0c;同时保持信号的形状和特性。这种设备在各种应用领域中都有重要作用&#xff0c;它的种类繁多&#xff0c;根据不同的用途可以分为多种类型。 1.医学领域 在医学设备中&#xff0c;…

搭建Harbor仓库

文章目录 Harbor仓库搭建Harbor仓库安装 docker 服务修改配置文件 Harbor仓库 搭建Harbor仓库 下载 Harbor 仓库 安装 docker 服务 # step 1: 安装必要的一些系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 yum-config-m…

notepad++安装 hex-editor插件

打开notepad 点击插件 搜索 hex-editor,点击右侧 安装install 安装成功后&#xff0c;在已安装插件中就有显示了

Java性能优化(五)-多线程调优-Lock同步锁的优化

作者主页&#xff1a; &#x1f517;进朱者赤的博客 精选专栏&#xff1a;&#x1f517;经典算法 作者简介&#xff1a;阿里非典型程序员一枚 &#xff0c;记录在大厂的打怪升级之路。 一起学习Java、大数据、数据结构算法&#xff08;公众号同名&#xff09; ❤️觉得文章还…

《QT实用小工具·五十九》随机图形验证码,带有一些可人的交互与动画

1、概述 源码放在文章末尾 该项目实现了可交互的动画验证码控件&#xff0c;趣味性十足&#xff1a; 字符变换动画 噪音动画 可拖动交互 项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef CAPTCHAMOVABLELABEL_H #define CAPTCHAMOVABLELABEL…

【影片欣赏】【指环王】【魔戒:护戒使者 The Lord of the Rings: The Fellowship of the Ring】

2001年发行&#xff0c;Extended DVD Edition Part One 1. Prologue: One Ring to Rule Them All… 2. Concerning Hobbits 3. The Shire 4. Very Old Friends 5. A Long-expected Party 6. Farewell Dear Bilbo 7. Keep It Secret, Keep It Safe 8. The Account of Isildur 9…

MyBatis入门例子

1、建立与数据库对应的POJO类 2、建立mybatis的配置文件 修改后如下&#xff1a; 3、创建POJO对象和Mysql数据的表之间的映射配置 4、建一个测试方法 实现从数据库中取数一条数据&#xff0c;封装成User对象返回 注意点&#xff1a; 这点&#xff0c;大家应该不陌生了&#x…

28-代码随想录18四数之和

18. 四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff…

小米手机miui14 android chrome如何取消网页自动打开app

搜索媒体打开应用 选择你要阻止打开的app&#xff0c;以github为例 取消勾选打开支持的链接。 参考&#xff1a;https://www.reddit.com/r/chrome/s/JBsGkZDkRZ

【进程终止】退出信号 | 三种退出情况 | 如何进程终止returnexit_exit

目录 退出码 退出信号 进程终止情况3 如何进程终止 return退出 库函数exit 系统调用函数_exit ​exit和_exit的区别缓冲区 exit _exit 退出码 回顾上篇 代码跑完&#xff0c;结果正确&#xff08;退出码为0&#xff09;代码跑完&#xff0c;结果不正确&#xff08;退…

批量将GOID转成GO term名并添加BP,MF,CC分类信息

基因本体论&#xff08;Gene Ontology&#xff0c;GO&#xff0c;https://www.geneontology.org&#xff09;是一个广泛应用于生物信息学领域的知识库&#xff0c;它提供了一套标准化的词汇和分类体系&#xff0c;用于描述基因功能、细胞组分和生物过程。GO旨在统一科研人员对基…

C/C++ BM30 二叉搜索树与双向链表

文章目录 前言题目解决方案一1.1 思路阐述1.2 源码 解决方案二2.1 思路阐述2.2 源码 总结 前言 这道题要明白二叉搜索树的概念&#xff0c;同时还要对链表的知识比较熟悉。 题目 输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的双向链表。如下图所示 数据范…

在QEMU上运行OpenSBI+Linux+Rootfs

在QEMU上运行OpenSBILinuxRootfs 1 编译QEMU2 安装交叉编译工具3 编译OpenSBI4 编译Linux5 创建根文件系统5.1 编译busybox5.2 创建目录结构5.3 制作文件系统镜像5.3.1 创建 ext2 文件5.3.2 将目录结构拷贝进 ext2 文件5.3.3 取消挂载 6 运行OpenSBILinuxRootfs 本文所使用的版…

PVZ2 植物克僵尸【第二期】

众所周知&#xff0c;PVZ2&#xff08;植物大战僵尸2&#xff09;中有许多恶心的僵尸&#xff0c;而我们不得不派出它们的————克星&#xff01;&#xff08;*为建议方法&#xff09; 5.战机小鬼 战机小鬼&#xff0c;恶心会发射子弹&#xff0c;所以&#xff1a; 1&…

(三)JSP教程——JSP动作标签

JSP动作标签 用户可以使用JSP动作标签向当前输出流输出数据&#xff0c;进行页面定向&#xff0c;也可以通过动作标签使用、修改和创建对象。 <jsp:include>标签 <jsp:include>标签将同一个Web应用中静态或动态资源包含到当前页面中。资源可以是HTML、JSP页面和文…

【解决】:git clone项目报错fatal: fetch-pack: invalid index-pack output

象&#xff1a;之前一直使用gitee将个人学习和工作相关记录上传到个人gitee仓库&#xff0c;一直没出现过问题。直到有一天换电脑重新拉取代码发现出了问题&#xff0c;具体如下图&#xff1a; 原因分析&#xff1a; 经过查询发现主要原因是因为git clone的远程仓库的项目过大…
最新文章