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,一经查实,立即删除!

相关文章

mac电脑生成文件下载URL

1.首先打开web共享&#xff0c;终端方式。 开始 sudo apachectl start 停止&#xff1a; sudo apachectl stop 重启&#xff1a; sudo apachectl restart 2.将需要下载的文件 app.v1.6.12_note.apk /Library/WebServer/Documents/ 目录下 3. 同一网络下&#xff0c;直接用…

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, 就得到一个赛程…

【机器学习】之 K-最近邻(KNN)算法原理及实现

K-最近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;是一种简单且直观的监督学习算法&#xff0c;广泛应用于分类和回归任务。本文将介绍KNN算法的基本概念、实现细节以及Python代码示例。 基本概念 KNN算法的核心思想是&#xff1a;给定一个测试样本&#xff0c;根据…

上位机图像处理和嵌入式模块部署(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进…

请说明Vue的filter的理解与用法

Vue.js 的 filter 是一种特殊的功能&#xff0c;允许你在mustache插值 ({{ }}) 或 v-bind 表达式中预处理文本。然而&#xff0c;需要注意的是&#xff0c;从 Vue 2.x 开始&#xff0c;filter 已被标记为废弃&#xff0c;并且在 Vue 3.x 中已完全移除。尽管如此&#xff0c;了解…

力扣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;完美。如图

flutter 自动生成静态资源的引用

flutter_gen库的使用 第一步、项目yarml中dev_dependencies 新增一下flutter_gen_runner 和build_runner dev_dependencies:build_runner: nullflutter_gen_runner: null # flutter packages pub run build_runner build 第二步、新增配置信息 和(dev_dependencies 同级的) …

大话设计模式学习笔记

目录 工厂模式策略模式备忘录模式&#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…

prometheus 标签选择器 正则表达式 = 、=~

Prometheus expression是一种用于查询和操作Prometheus时间序列数据的查询语言。它具有一套丰富的函数和运算符&#xff0c;可以用于提取、聚合和转换时间序列数据。 正则表达式在Prometheus expresion中也被广泛使用&#xff0c;可以用于匹配和过滤时间序列。 Prometheus ex…