Element Plus 之 el-table相同行合并(通用函数),相同列合并(自行判断需合并的字段以及相应的列下标)

展示

在这里插入图片描述

代码

<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod"><el-table-column prop="date" label="Date" width="180" align="center" /><el-table-column prop="name1" label="Name1" width="180" align="center" /><el-table-column prop="name2" label="Name2" width="180" align="center" /><el-table-column prop="class" label="class" width="180" align="center" /><el-table-column prop="address" label="Address" />
</el-table>
const tableData = ref([{date: '2016-05-04',name1: 'Tom',name2: 'Tom',class: '三年级一班',address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-03',name1: 'Tom',name2: 'Tom',class: '三年级一班',address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-02',name1: 'Tom',name2: 'Tom',class: '三年级一班',address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-02',name1: 'Tom',name2: 'Tom',class: '三年级一班',address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-01',name1: 'Tom',name2: 'Tom',class: '三年级一班',address: 'No. 189, Grove St, Los Angeles'}
])const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {let rowspan = 1,colspan = 1// 合并列// 自行判断哪两个字段需要合并,相同值即代表要合并// 并且需要自行判断当前合并字段所在的列下标,如示例中的name1的列下标为1,name2的列下标为2// 则把name1的列下标的colspan设为2(即占两个单元格),那么name2的列下标的colspan则必须为0,表示不占单元格if (row.name1 == row.name2) {if (columnIndex == 1) {colspan = 2rowspan = 1} else if (columnIndex == 2) {colspan = 0rowspan = 0}}// 合并行// 定义需要合并的列字段,有哪些列需要合并,就自定义添加字段即可const fields = ['date']// 当前单元格的数据const cellValue = row[column.property]// 判断只合并定义字段的列数据if (cellValue && fields.includes(column.property)) {const prevRow = tableData.value[rowIndex - 1] //上一行数据let nextRow = tableData.value[rowIndex + 1] //下一行数据// 当上一行的单元格数据等于当前行数据时,当前行单元格隐藏if (prevRow && prevRow[column.property] === cellValue) {colspan = 0rowspan = 0} else {// 反之,则循环判断若下一行数据等于当前行数据,则当前行开始进行合并单元格let countRowspan = 1 // 用于合并计数多少单元格while (nextRow && nextRow[column.property] === cellValue) {nextRow = tableData.value[++countRowspan + rowIndex]}if (countRowspan > 1) {rowspan = countRowspan}}}return {rowspan,colspan}
}

完结。

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

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

相关文章

QT中引入OpenCV库总结(qmake方式和cmake方式)

文章目录 前言opencv环境配置一、opencv库获取的两种方式二、qmake和cmake配置2.1、 qmake2.2、cmake2.2.1、引入opencv示例 三、qt与opencv对应关系四、问题 前言 我的软件环境&#xff0c;写在前面 Windows10QT5.12.12VS2017OpenCV4.5.4 opencv环境配置 一、opencv库获取…

[石榴翻译] 维吾尔语音识别 + TTS语音合成

API网址 丝路AI平台 获取 Access token 接口地址&#xff1a;https://open.xjguoyu.cn/api/auth/oauth/token&#xff0c;请求方式&#xff1a;GET&#xff0c;POST Access token是调用服务API的凭证&#xff0c;调用服务API之前需要获取 token。每次成功获取 token 以后只有…

webrtc之rtc::ArrayView<const uint8_t>

rtc::ArrayView<const uint8_t> 是 WebRTC&#xff08;或其他基于 rtc 命名空间的库&#xff09;中常见的一个类型&#xff0c;它通常用于表示一块 只读的内存区域&#xff0c;该内存区域由一系列 uint8_t 类型&#xff08;无符号 8 位整数&#xff09;元素组成。 1. rt…

汽车供应链关键节点:物流采购成本管理全解析

在汽车行业&#xff0c;供应链管理是一项至关重要的任务。汽车制造从零部件的生产到整车的交付&#xff0c;涉及多个环节&#xff0c;其中物流、采购与成本管理是核心节点。本文将深入分析这些关键环节&#xff0c;探讨如何通过供应商管理系统及相关工具优化供应链管理。 一、…

Linux文件系统的安全保障---Overlayroot!

overlayroot 是一种使用 OverlayFS 实现的功能&#xff0c;可将根文件系统挂载为只读&#xff0c;并通过一个临时的写层实现对文件系统的修改。这种方法非常适合嵌入式设备或需要保持系统文件完整性和安全性的场景。下文以 RK3568 平台为例&#xff0c;介绍制作 overlayroot 的…

DEVIN AI==初步使用

注册 官网 Devin (the Developer) 开启一个对话session 体验第一个官方DEMO 工作内容是爬取两个网页&#xff0c;对比他们的注册流程&#xff0c;然后生成一个网页展示对比的结果 左边是对话&#xff0c;可以描述你的需求&#xff0c;右边是DEVIN根据你的要求做的一些事情&…

【Rust自学】11.3. 自定义错误信息

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.3.1. 添加错误信息 在 11.2. 断言(Assert) 中我们学习了assert!、assert_eq!和assert_ne!这三个宏&#xff0c;而这篇文章讲的就是它…

git - 用SSH方式迁出远端git库

文章目录 git - 用SSH方式迁出远端git库概述笔记以gitee为例产生RSA密钥对 备注END git - 用SSH方式迁出远端git库 概述 最近一段时间&#xff0c;在网络没问题的情况下&#xff0c;用git方式直接迁出git库总是会失败。 失败都是在远端, 显示RPC错误。 但是git服务器端是没问…

Linux第一个系统程序---进度条

进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念&#xff0c;我们用一张图来简单的理解一下&#xff1a; 在计算机语言当中&#xff1a; 换行符&#xff1a;\n 回车符&#xff1a;\r \r\n&#xff1a;回车换行 这时候有人可能会有疑问&#xff1a;我在学习C…

智慧城市应急指挥中心系统平台建设方案

建设背景与目标 智慧城市应急指挥中心系统平台的建设&#xff0c;源于对城市管理精细化、智能化的迫切需求。平台旨在通过整合各方资源&#xff0c;实现应急事件的快速响应与高效处置&#xff0c;提升城市安全管理水平。 前端设计与信息采集 前端设计注重立体化、全方位信息…

011:利用大津算法完成图片分割

本文为合集收录&#xff0c;欢迎查看合集/专栏链接进行全部合集的系统学习。 合集完整版请参考这里。 上一篇文章介绍了大津算法可以完成图片的前景和背景分割。 总的来说&#xff0c;大津算法的核心思想就两个&#xff1a; 数学上&#xff0c;通过确定一个像素阈值&#xf…

一键部署Netdata系统无需公网IP轻松实现本地服务器的可视化监控

文章目录 前言1.关于Netdata2.本地部署Netdata3.使用Netdata4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定Netdata公网地址 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。…

21_Spring Boot缓存注解介绍

前面我们通过使用@EnableCaching、@Cacheable注解实现了Spring Boot默认的基于注解的缓存管理,除此之外,还有更多的缓存注解以及注解属性可以配置优化缓存管理。下面我们针对Spring Boot中的缓存注解及相关属性进行详细讲解。 1.@EnableCaching注解 @EnableCaching是由Spri…

【Artificial Intelligence篇】AI 入侵家庭:解锁智能生活的魔法密码,开启居家梦幻新体验

家庭智能化的时代已经到来&#xff0c;准备好了嘛&#xff01;&#xff01;&#xff01; 在当今数字化浪潮汹涌澎湃的时代&#xff0c;人工智能&#xff08;AI&#xff09;宛如一位神秘而强大的魔法师&#xff0c;悄然 “入侵” 了我…

如何用SQL语句来查询表或索引的行存/列存存储方式|OceanBase 用户问题集锦

一、问题背景 自OceanBase 4.3.0版本起&#xff0c;支持了列存引擎&#xff0c;允许表和索引以行存、纯列存或行列冗余的形式创建&#xff0c;且这些存储方式可以自由组合。除了使用 show create table命令来查看表和索引的存储类型外&#xff0c;也有用户询问如何通过SQL语句…

2024机器学习前沿:从大型语言模型到高效计算的技术创新与发展趋势

大型语言模型在多个领域的应用潜力及其推动的技术发展与创新 大型语言模型&#xff08;Large Language Models, LLMs&#xff09;如GPT-4、BERT等&#xff0c;凭借其强大的自然语言理解和生成能力&#xff0c;正在多个领域展现出广泛的应用潜力&#xff0c;推动相关技术的快速…

<C++学习> C++ Boost 内存管理教程

C Boost 内存管理教程 Boost 提供了一系列工具来增强 C 的内存管理能力&#xff0c;主要通过智能指针、池分配器和内存池等模块实现。与原始指针和手动内存分配相比&#xff0c;Boost 内存管理工具能够显著提升安全性和性能&#xff0c;同时简化开发。 1. 内存管理的核心工具 …

程序员如何高效学习API

API&#xff08;应用程序编程接口&#xff09;是软件开发中的关键组件&#xff0c;它允许不同的软件应用程序相互通信、交换数据和功能。作为程序员&#xff0c;掌握API的学习和应用是提升开发效率和代码质量的重要途径。本文将详细介绍程序员如何高效学习API&#xff0c;包括基…

如何播放视频文件

文章目录 1. 概念介绍2. 使用方法2.1 实现步骤2.2 具体细节3. 示例代码4. 内容总结我们在上一章回中介绍了"如何获取文件类型"相关的内容,本章回中将介绍如何播放视频.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 播放视频是我们常用的功能,不过Flutter官方…

Type-C单口便携显示器-LDR6021

Type-C单口便携显示器是一种新兴的显示设备&#xff0c;它凭借其便携性、高性能和广泛的应用场景等优势&#xff0c;正在成为市场的新宠。以下是Type-C单口便携显示器的具体运用方式&#xff1a; 一、连接与传输 1. **设备连接**&#xff1a;Type-C单口便携显示器通过Type-C接…