Element Plus 的 el-table 组件合并不规律的行

在 Element Plus 的 el-table 组件中,可以使用 span-method 属性来动态合并不规律数量的行。您可以根据数据的特定条件来确定合并行的方式

<template><el-table :data="tableData" :span-method="handleSpanMethod" border><el-table-column type="index" label="序号"></el-table-column><el-table-column label="姓名" prop="name"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column><el-table-column label="性别" prop="gender"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: 'John', age: 20, gender: 'Male' },{ name: 'Jane', age: 30, gender: 'Female' },{ name: 'Tom', age: 35, gender: 'Male' },{ name: 'Alice', age: 25, gender: 'Female' },{ name: 'Bob', age: 28, gender: 'Male' },{ name: 'Eve', age: 38, gender: 'Female' },{ name: 'Mike', age: 40, gender: 'Male' },{ name: 'Lily', age: 42, gender: 'Female' }]};},methods: {handleSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// 合并姓名列if (rowIndex > 0 && row.name === this.tableData[rowIndex - 1].name) {// 当前行的姓名与前一行相同,则合并行return { rowspan: 0, colspan: 0 };} else {// 当前行的姓名与前一行不同,则不合并行let count = 1;for (let i = rowIndex + 1; i < this.tableData.length; i++) {if (this.tableData[i].name === row.name) {count++;} else {break;}}return { rowspan: count, colspan: 1 };}} else {// 其他列不合并return { rowspan: 1, colspan: 1 };}}}
};
</script>

我们在 el-table 上指定了 span-method 属性,并将其绑定到 handleSpanMethod 方法上。在 handleSpanMethod 方法中,我们根据行索引和列索引来判断是否需要合并行,并返回相应的 rowspan 和 colspan 值。

在这个例子中,我们合并了第一列(姓名列)的行。第一行合并了三行,第四行合并了两行,其余行都不需要合并。其他列不进行合并,每行都显示单个单元格。

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

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

相关文章

【计算机视觉】角点检测(Harris、SIFT)

Harris 角点指的是窗口延任意方向移动&#xff0c;都有很大变化量的点。 用数学公式表示为&#xff1a; E(u,v)反映的移动后窗口的差异&#xff0c;w(x,y)为每个像素的点权值&#xff0c;I(xu,yv)是移动的像素值&#xff0c;I(x,y)是移动前的像素值。 将E(u,v)进行泰勒展开&am…

Sql中的like的用法

Sql中的like的用法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一起深入探讨SQL中一个强大而灵活的条件查询操作——LIKE关键字的用法。作…

基于Spring Cloud + Spring Boot的企业电子招标采购系统源码

随着企业的快速发展&#xff0c;招采管理逐渐成为企业运营中的重要环节。为了满足公司对内部招采管理提升的要求&#xff0c;建立一个公平、公开、公正的采购环境至关重要。在这个背景下&#xff0c;我们开发了一款电子招标采购软件&#xff0c;以最大限度地控制采购成本&#…

AUTOSAR从入门到精通-网络通信(UDPNm)(一)

目录 前言 几个相关概念 原理 什么是UdpNm 约束和假设 限制

智能硬件(8)之蜂鸣器模块

学好开源硬件&#xff0c;不仅仅需要会编程就可以了&#xff0c;电路基础是很重要的&#xff1b;软件和硬件都玩的溜&#xff0c;才是高手&#xff0c;那么小编为了方便大家的学习&#xff0c;特别画了一块智能传感器板子&#xff0c;来带领大家学习电路基础&#xff0c;玩转智…

C# WPF上位机开发(WebApi联调)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很多时候&#xff0c;客户需要开发的不仅仅是一个上位机系统&#xff0c;它还有其他很多配套的系统或设备&#xff0c;比如物流小车、立库、数字孪…

算法与数据结构之算法基础(java)

目录 什么是数据结构&#xff1f; 什么是算法&#xff1f; 1、算法的特性 1.1 五个特征 1.2 设计原则 1.3 评价算法的两个总要指标&#xff1a;时间复杂度和空间复杂度 2、时间复杂度分析 2.1 时间复杂度表示方法&#xff1a;大O表示法 2.2 时间复杂度如何分析 2.3 复…

【电子通识】开关的种类

开关在我们日常生活与工作中使用较多。开关有无数种形式&#xff0c;种类繁多。从微小的按钮到巨大的控制器&#xff0c;功能多种多样。这种多样性受到机械或电气操作、手动或电子控制等因素的影响&#xff0c;并且与个人在设计美学和用户界面方面的偏好也有关。 电子开关采用 …

facebook广告的基础知识

Facebook广告是在Facebook、Instagram、Audience Network等与Facebook相关的SNS和服务上投放的广告。以下是关于Facebook广告的基础知识&#xff1a; 广告类型&#xff1a; 静态图片广告&#xff1a;主要通过Facebook的新闻提要投放的图片广告&#xff0c;可以张贴产品和服务…

【WPF.NET开发】附加事件

本文内容 先决条件附加事件语法WPF 如何实现附加事件附加事件方案处理附加事件定义自定义附加事件引发 WPF 附加事件 Extensible Application Markup Language (XAML) 定义了一种语言组件和称为附加事件的事件类型。 附加事件可用于在非元素类中定义新的 路由事件&#xff0c…

Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

紧接着上一篇博客&#xff1a;Hadoop安装笔记1&#xff1a; Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2&#xff1a;离线数据处理-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135…

SSL VPN移动安全接入策略

一、登陆策略 1、需求背景&#xff08;【系统设置】-【系统选项】&#xff09; 需求&#xff1a; &#xff08;1&#xff09;接入端口可以自定义且支持HTTP 端口跳转到HTTPS端口 &#xff08;2&#xff09;登录页面自持自定义背景、logo等 &#xff08;3&#xff09;登…

Permission Denied原因及解决方法

Permission Denied原因及解决方法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将探讨一个常见而又令人头疼的问题——“Permission denied解…

linux cat命令增加-f显示文件名功能

在使用cat命令配合grep批量搜索文件内容时&#xff0c;我仅仅能知道是否搜索到&#xff0c;不知道是在哪个文件里找到的。比如cat ./src/*.c | grep full_write,在src目录下的所有.c文件里找full_write,能匹配到所有的full_write&#xff0c;但是不知道它们分别在哪些文件里。于…

CData ADO.NET Data Providers 2022 Crack

ADO.NET 数据提供程序 轻松将 .NET 应用程序与 SaaS、NoSQL 和大数据连接起来 数据绑定到应用程序、数据库和服务 完整的创建、读取、更新和删除 (CRUD) 支持&#xff0c;无需编码 200 基于标准的 ADO.NET 数据提供程序 100% 适用于 .NET Standard、.NET Core 和 Xamarin 的完全…

1550 自由落体

#include<bits/stdc.h> using namespace std; int main(){double a,b,c,d,e,t1,t2,s1,s2;int n,num0;//定义cin>>a>>b>>c>>d>>e>>n;//输入t1sqrt(((a-e)*2.0)/10.0);t2sqrt((a*2.0)/10.0);s1bd-t1*c0.0001;s2b-t2*c-0.0001;//小球位…

作为铭文跨链赛道龙头,SoBit 有何突出之处?

跨链桥赛道将是铭文市场长期的发展的刚需 在比特币网络中&#xff0c;Ordinals 铭文铸造的铭文总量已经超过了 5100 万枚&#xff0c;并累计费用收入超 5028 BTC。同时&#xff0c;仅 BRC-20 叙事方向的市值&#xff0c;就已经超过了 30 亿美元&#xff0c;并且随着铭文资产种类…

简单工厂设计模式(计算器实例优化)

简单工厂设计模式&#xff08;计算器实例优化&#xff09; 介绍为什么采用面向对象编程而不是面向过程呢&#xff1f;实例讲解业务层划分出来逻辑层继承简单工厂&#xff1a;&#xff08;多态&#xff09;业务层&#xff1a;&#xff08;解耦合&#xff09;主控制台 总结 介绍 …

C语言实现关键字匹配算法(复制即用)

文章目录 前言功能要求运行截图全部代码 前言 无套路&#xff0c;均已上机通过&#xff0c;求个关注求个赞&#xff0c;提供答疑解惑服务。 功能要求 一份C源代码存储在一个文本文件中&#xff0c;请统计该文件中关键字出现的频度&#xff0c;并按此频度对关键字进行排序。要…

Centos如何修改ssh端口

想必很大一部分的同学用的是centos服务器&#xff0c;对于默认的22端口存在一定的安全风险&#xff0c;所以今天我们一起看下如何修改ssh端口 一、什么是SSH SSH&#xff08;Secure Shell&#xff09;是一种安全的远程登录协议&#xff0c;它允许您通过网络远程连接到Linux系统…