element table表格行列合并span-method,根据数据动态行列合并

表格行列合并需要用到 table的方法 span-method

在这里插入图片描述

根据数据来进行动态的行列合并,实例如下:

 <el-table:data="tableData":span-method="objectSpanMethod" style="width: 100%"><el-table-columnprop="key"label="分类"width="180"></el-table-column><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="name"label="名称"></el-table-column></el-table>
let data = [{ key:'test1', id:0, name:'xxx' },{ key:'test1', id:1, name:'xxx' },{ key:'test2', id:2, name:'xxx' },{ key:'test1', id:3, name:'xxx' },{ key:'test2', id:4, name:'xxx' },{ key:'test1', id:5, name:'xxx' },
]

我们要根据 key 进行列合并,将test1合并到一起,test2合并到一起

//先处理数据
let one = data.filter(item => item.key === 'test1')
let two= data.filter(item => item.key === 'test2')//保证test1 在一堆,test2在一堆
tableData = one.concat(two)//列合并方法
objectSpanMethod =({ row, column, rowIndex, columnIndex })=>{const { key } = row// test1 使用 rowIndex作为开始// test2 采用rowIndex - test1 长度开始let last = rowIndex - one.lengthif (columnIndex === 0) { //判断是否是第一列if(key === 'test1'){ //判断合并项 R1 R2if (rowIndex % one.length === 0) {return {rowspan: one.length, // 需要合并的行数colspan: 1}}else{ //不在范围内 直接返回默认return {rowspan: 0,colspan: 0}}}else if(key === 'test2'){if(last % two.length === 0){return {rowspan: two.length, // 需要合并的行数colspan: 1}}else{return {rowspan: 0,colspan: 0}}}  }
}

我们根据 key 进行列合并,按照合并规则 id 为0 1 3 5的数据合并到 test1 中,id为2 4的数据合并到test2中

在这里插入图片描述

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

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

相关文章

PCIe的链路状态

目录 概述 链路训练的目的 两个概念 下面介绍LTSSM状态机 概述 PCie链路的初始化过程较为复杂&#xff0c;Pcie总线进行链路训练时&#xff0c;将初始化Pcie设备的物理层&#xff0c;发送接收模块和相关的链路状态信息&#xff0c;当链路训练成功结束后&#xff0c;PCIe链…

xcode开发swift允许发送http请求设置

Xcode 现在新建项目默认只支持HTTPS请求&#xff0c;认为HTTP请求不安全&#xff0c;所以不支持。但是开发环境一般都是http模式&#xff0c;所以需要单独配置才可以访问。 需要到项目的设置里面&#xff0c;点击info&#xff0c;如果没有App Transport Security Setting这一项…

c# - - - winform 右下角气球提示通知

c# - - - winform 右下角气球提示通知 winform 右下角气球提示通知 1.1 winform 右下角气球提示通知 在工具箱中点击 NotifyIcon 控件&#xff0c;拖动到 Form1 窗体上添加这个控件。 在“提示”按钮的点击事件中写气球提示通知内容。 public partial class Form1 : Form {…

民国漫画杂志《时代漫画》第29期.PDF

时代漫画29.PDF: https://url03.ctfile.com/f/1779803-1248635405-bf3c87?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

《探索Stable Diffusion:AI绘画的创意之路与实战秘籍》

《Stable Diffusion AI 绘画从提示词到模型出图》介绍了 Stable Diffusion AI 绘画工具及其使用技巧。书中内容分为两部分&#xff1a;“基础操作篇”&#xff0c;讲解了 SD 文生图、图生图、提示词、模型、ControlNet 插件等核心技术的应用&#xff0c;帮助读者快速从新手成长…

算法思想总结:哈希表

一、哈希表剖析 1、哈希表底层&#xff1a;通过对C的学习&#xff0c;我们知道STL中哈希表底层是用的链地址法封装的开散列。 2、哈希表作用&#xff1a;存储数据的容器&#xff0c;插入、删除、搜索的时间复杂度都是O&#xff08;1&#xff09;&#xff0c;无序。 3、什么时…

YOLOv10训练教程—用YOLOv10训练自己的数据集

文章目录 YOLOv10简介亮点模型介绍 下载源码环境配置准备数据集训练模型&#xff1a;命令行py文件 验证模型推理参考文献 ✨✨✨✨立志真正解决大家问题&#xff0c;只写精品博客文章&#xff0c;感谢关注&#xff0c;共同进步✨✨✨✨ YOLOv9还没捂热乎&#xff0c;YOLOv10就推…

【传知代码】探索视觉与语言模型的可扩展性(论文复现)

前言&#xff1a;在数字化时代的浪潮中&#xff0c;我们见证了人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其中视觉与语言模型作为两大核心领域&#xff0c;正以前所未有的速度改变着我们的生活和工作方式。从图像识别到自然语言处理&#xff0c;从虚拟现实…

防雷接地测试方法及注意事项

一、防雷接地的测试方法 检测避雷针、高层建筑物等设施的接地电阻&#xff0c;接雷后能否顺畅导入大地。 1、你先找到防雷接地网的接地引线或等电位联接箱。 2、用接地电阻测测试仪测接地电阻。 &#xff08;有两根测试桩0.4M的要插入泥土&#xff0c;一根距测试点20米&…

抽屉式备忘录(共25041字)

Sing Me to Sleep <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>与妖为邻的备忘录</title&g…

什么是Swagger UI ,swagger ui 的authorization怎么获取?

什么是Swagger UI Swagger UI 是一个用于可视化和交互式地展示API文档的工具。它是Swagger&#xff08;现称为OpenAPI&#xff09;生态系统的一部分&#xff0c;旨在帮助开发者和API用户更好地理解、测试和调试API。 主要功能和作用 1. API文档自动生成&#xff1a; Swagge…

工业4.0利器:MES系统

工业4.0利器&#xff1a;MES系统 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xff0c;…

AI雷达小程序个人名片系统源码 PHP+MYSQL组合开发 带完整的安装代码包以及搭建教程

系统概述 随着移动互联网的普及和社交媒体的兴起&#xff0c;人们获取信息和建立联系的方式发生了翻天覆地的变化。传统的纸质名片已经无法满足现代人的需求&#xff0c;而小程序作为一种轻量级应用&#xff0c;具有无需安装、即开即用、易于分享等特点&#xff0c;成为了个人…

【JavaScript】---DOM操作1:获取元素

【JavaScript】—DOM操作1&#xff1a;获取元素 文章目录 【JavaScript】---DOM操作1&#xff1a;获取元素一、什么是DOM&#xff1f;1.1 概念1.2 图例演示 二、查找HTML元素2.1 getElementById()2.2 getElementsByTagName()2.3 getElementsByClassName()2.4 querySelector()2.…

web-上传项目文件夹到Git远程仓库

Git初识 概念&#xff1a;一个免费开源&#xff0c;分布式的代码版本控制系统&#xff0c;帮助开发团队维护代码 作用&#xff1a;记录代码内容&#xff0c;切换代码版本&#xff0c;多人开发时高效合并代码内容 检验成功 打开bash终端&#xff08;git专用&#xff09;命令…

2020长安杯

链接成功 检材一 1检材 1 的操作系统版本是 ()A. CentOS release 6.5 (Final)B. Ubuntu 16.04.3 LTSC. Debian GNU/ Linux 7.8 (wheezy)D. CentOS Linux release 7.6.1810 (Core)D 2检材 1 中&#xff0c;操作系统的内核版本是 ()(答案格式&#xff1a; “1.2.34” 数字和半角…

日期类的实现

目录 日期类的实现比较功能的实现日期类的构造函数Date::Date(int year,int month,int day)代码 判断日期大小判断日期类d1是否小于d2bool Date::operator<(const Date& d)代码 判断日期类d1是否小于等于d2bool Date::operator<(const Date& d) 代码 判断日期类d…

LabVIEW版本控制

LabVIEW作为一种流行的图形化编程环境&#xff0c;在软件开发中广泛应用。有效地管理版本控制对于确保软件的可靠性和可维护性至关重要。LabVIEW提供了多种方式来管理VI和应用程序的修订历史&#xff0c;以满足不同规模和复杂度的项目需求。 LabVIEW中的VI修订历史 LabVIEW内置…

数学建模 —— 灰色系统(4)

目录 什么是灰色系统&#xff1f; 一、灰色关联分析 1.1 灰色关联分析模型 1.2 灰色关联因素和关联算子集 1.2.1 灰色关联因素 1.2.2 关联算子集 1.3 灰色关联公理与灰色关联度 1.3.1 灰色关联度 1.3.2 灰色关联度计算步骤 1.4 广义关联度 1.4.1 灰色绝对关联…

宏集JMobile Studio—实现HMI界面高自由度设计

一、简介 物联网HMI的组态软件是数据可视化的重要工具&#xff0c;工程师可以通过图形化界面来配置、监控和管理现场采集的数据。目前&#xff0c;市面上大多数的组态软件里的可视化控件库都由设计师预先部署&#xff0c;用户只能调用而不能完全自定义控件&#xff0c;导致可视…