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.mzph.cn/bicheng/19571.shtml

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

相关文章

C++系列——————类和对象(上)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、面向对象的三大特征二、类的引入2.1类的定义 三.类的访问限定符3.1访问限定符的介绍3.2.访问限定符的使用 四、类的作用域五、类的实例化六、类对象模型6.1…

JavaScript的内存管理机制

No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 一、内存…

Pipecat: 创建语音对话agent的开源框架,支持多模态!

项目简介 pipecat 是用于构建语音&#xff08;和多模态&#xff09;对话代理的框架。诸如私人教练、会议助理、儿童讲故事玩具、客户支持机器人、摄入流程和尖刻的社交伙伴。 看看一些示例应用&#xff1a; 语音代理入门 您可以开始在本地计算机上运行 Pipecat&#xff0c;然…

Nginx(openresty) 开启目录浏览 以及进行美化配置

1 nginx 安装 可以参考:Nginx(openresty) 通过lua结合Web前端 实现图片&#xff0c;文件&#xff0c;视频等静态资源 访问权限验证&#xff0c;进行鉴权 &#xff0c;提高安全性-CSDN博客 2 开启目录浏览 location /file{alias /data/www/; #指定目录所在路径autoindex on; …

【数学不建模】赛程安排

你所在的年级有5个班&#xff0c;每班一支球队在同一块场地上进行单循环赛, 共要进行10场比赛. 如何安排赛程使对各队来说都尽量公平呢. 下面是随便安排的一个赛程: 记5支球队为A, B, C, D, E&#xff0c;在下表左半部分的右上三角的10个空格中, 随手填上1,2,10, 就得到一个赛程…

上位机图像处理和嵌入式模块部署(f407 mcu vs f103)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于一部分嵌入式场景来说&#xff0c;f103其实已经足够了&#xff0c;特别是要求不高的低速场合。如果开发的代码比较多&#xff0c;还可以选用更…

黑马es集群

1、为什么要做es集群 单机的elasticsearch做数据存储&#xff0c;必然面临两个问题:海量数据存储问题、单点故障问题 海量数据存储问题:将索引库从逻辑上拆分为N个分片(shard)&#xff0c;存储到多个节点 单点故障问题:将分片数据在不同节点备份(replica) 2、搭建es集群 1、用…

Python 数据库编程(Mysql)

目录 知识点 游标 提交事务 检索数据 回滚 关闭 增删改查 查询 新增 修改 删除 回滚的用法 知识点 游标 在Python中&#xff0c;数据库游标&#xff08;cursor&#xff09;是用于执行SQL语句并检索数据的对象。游标允许你在数据库中移动并操作数据。在使用Python进…

力扣Hot100-有效的括号(栈stack)

给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型的左括…

【C++】哈希(2万字)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 unordered系列关联式容器 unordered_map unordered_map的文档介绍 unordered_map的接口说明 unordered_set 底层结构 哈希概念 哈希冲突 哈希函数 哈希…

Whisper-AT:抗噪语音识别模型(Whisper)实现通用音频事件标记(Audio Tagger)

1.概述: Whisper-AT 是建立在 Whisper 自动语音识别&#xff08;ASR&#xff09;模型基础上的一个模型。Whisper 模型使用了一个包含 68 万小时标注语音的大规模语料库进行训练&#xff0c;这些语料是在各种不同条件下录制的。Whisper 模型以其在现实背景噪音&#xff08;如音乐…

探究 Meme 的金融与社交属性

原文标题&#xff1a;《A Social and Financial Study of Memecoins》撰文&#xff1a;Andrew Hong编译&#xff1a;Chris&#xff0c;Techub News 每一个市场周期都伴随着 Meme 代币的出现。一群人围绕着某个 Meme 集结起来&#xff0c;暂时抬高了某个资产的价格&#xff08;从…

Github Copilot登录账号,完美支持chat

Github Copilot 代码补全等功能&#xff0c;提高写代码的效率 https://web.52shizhan.cn/activity/copilot 登录授权后&#xff0c;已经可以使用&#xff0c;完美。如图

大话设计模式学习笔记

目录 工厂模式策略模式备忘录模式&#xff08;快照模式&#xff09;代理模式单例模式迭代器模式访问者模式观察者模式解释器模式命令模式模板方法模式桥接模式适配器模式外观模式享元模式原型模式责任链模式中介者模式装饰模式状态模式 工厂模式 策略模式 核心&#xff1a;封装…

03.k8s常用的资源

3.k8s常用的资源 3.1 创建pod资源 k8s yaml的主要组成 apiVersion: v1 api版本 kind: pod 资源类型 metadata: 属性 spec: 详细上传nginx镜像文件&#xff0c;并且上传私有仓库里面 k8s_pod.yaml apiVersion: v1 kind: Pod metadata:name: nginxlabels:app: we…

Tuxera Ntfs For Mac 2023的具体使用方法

大家都知道由于操作系统的原因&#xff0c;在苹果电脑上不能够读写NTFS磁盘&#xff0c;但是&#xff0c;今天小编带来的这款tuxera ntfs 2024 mac 破解版&#xff0c;完美的解决了这个问题。这是一款在macOS平台上使用的磁盘读写软件&#xff0c;能够实现苹果Mac OS X系统读写…

Docker的数据管理(数据卷+数据卷容器)

文章目录 一、Docker的数据管理1、概述2、主要的技术&#xff08;三种数据挂载方式&#xff09;2.1、数据卷&#xff08;Volumes&#xff09;2.2、绑定挂载&#xff08;Bind mounts&#xff09;2.3、tmpfs挂载&#xff08;Tmpfs mounts&#xff09;2.4、之间的关系&#xff08;…

示例丨医学、医药类查新点填写参考案例

根据《科技查新技术规范》GB/T 32003-2015&#xff0c;科学技术要点是必须要包含查新点内容的&#xff0c;而查新点就是科学技术要点中能够体现查新项目新颖性和技术进步的技术特征点。 在日常查新工作的接待中&#xff0c;我们发现医学、医药类查新合同上查新点的书写&#x…

计算机tcp/ip网络通信过程

目录 &#xff08;1&#xff09;同一网段两台计算机通信过程 &#xff08;2&#xff09;不同网段的两台计算机通信过程 &#xff08;3&#xff09;目的主机收到数据包后的解包过程 &#xff08;1&#xff09;同一网段两台计算机通信过程 如果两台计算机在同一个局域网中的同…

算法(九)希尔排序

文章目录 希尔排序简介代码实现 希尔排序简介 希尔排序&#xff08;shell sort&#xff09;选定一个小于N&#xff08;数列长度&#xff09;的整数gap作为第一增量&#xff0c;然后将所有距离为gap的元素分成一组&#xff0c;然后对每一组的元素进行插入排序。然后再取一个比前…