vue table id一样的列合并

news/2024/9/22 3:18:56/

合并场景:如果id一样,则主表列合并,子表列不做合并,可实现单行、多行合并,亲测!!!
展示效果如图示:
在这里插入图片描述
组件代码:

// table组件  :span-method="objectSpanMethod" 一定要有这个方法,合并逻辑都在这个里面<el-table:data="dataList":span-method="objectSpanMethod"border><el-table-column prop="className" label="班级" /><el-table-column prop="name" label="姓名" /><el-table-column prop="sex" label="性别"  /><el-table-column prop="dataType" label="科目" /><el-table-column prop="score" label="分数" /></el-table>

js代码:

//数据格式
dataList: [{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"数学",score:"81"},{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"英语",score:"33"},{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"历史",score:"66"},{id:"2",className:"3-2",name:"李四",sex:"女",dataType:"科学",score:"13"},{id:"2",className:"3-2",name:"李四",sex:"女",dataType:"英语",score:"90"},],//合并的js逻辑  需要合并多少列就写几列
objectSpanMethod({row, column, rowIndex, columnIndex}) {const _row = this.flitterData(this.dataList).one[rowIndex];const _col = _row > 0 ? 1 : 0;//合并第一列if (columnIndex === 0) {return {rowspan: _row,colspan: _col,};}//合并第二列if (columnIndex === 1) {return {rowspan: _row,colspan: _col,};}//合并第三列if (columnIndex === 2) {return {rowspan: _row,colspan: _col,};}},flitterData(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {// 如果id一样,就合并,根据自己的需求来改,id换为要比较的列名if (item.id == arr[index - 1].id) {spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},

http://www.ppmy.cn/news/1528670.html

相关文章

DepthCrafter:为开放世界视频生成一致的长深度序列

通过利用视频扩散模型&#xff0c;我们创新了一种新颖的视频深度估算方法–DepthCrafter。 它可以为开放世界视频生成具有细粒度细节的时间一致性长深度序列&#xff0c;而无需摄像机姿势或光流等附加信息。 简介 动机。 尽管在静态图像的单目深度估算方面取得了重大进展&…

mysql中的json查询

首先来构造数据 查询department里面name等于研发部的数据 查询语句跟普通的sql语句差不多&#xff0c;也就是字段名要用到path表达式 select * from user u where u.department->$.name 研发部 模糊查询 select * from user u where u.department->$.name like %研发%…

Zookeeper安装使用教程

# 安装 官网下载安装包 #配置文件 端口默认8080&#xff0c;可能需要更改一下 #启动 cd /Users/lisongsong/software/apache-zookeeper-3.7.2-bin/bin ./zkServer.sh start #查看运行状态 ./zkServer.sh status #停止 ./zkServer.sh stop #启动客户端 ./zkCli.sh ls /

计算机网络29——Linux基本命令vim,gcc编译命令

1、创建新用户 2、给用户设置密码 3、切换到新用户 切换到root用户 4、删除用户 5、查看ip 6、ping 查看物理上两台主机是否联通 7、netstatus 8、nslookup 查看网址的地址 9、负载均衡与容灾备份 负载均衡&#xff1a;指将负载&#xff08;工作任务&#xff09;进行平衡、分…

python-SZ斐波那契数列/更相减损数

一&#xff1a;SZ斐波那契数列题目描述 你应该很熟悉斐波那契数列&#xff0c;不是吗&#xff1f;现在小理不知在哪里搞了个山寨版斐波拉契数列&#xff0c;如下公式&#xff1a; F(n) { $\ \ \ \ \ \ \ \ \ \ \ \ $ a,( n1) $\ \ \ \ \ \ \ \ \ \ \ \ $ b,( n2) $\ \ \ \ \ \ …

【JavaScript】数据结构之堆

什么是堆&#xff1f; 堆都能用树来表示&#xff0c;一般树的实现都是利用链表。而 二叉堆 是一种特殊的堆&#xff0c;它用完全二叉树来表示&#xff0c;却可以利用数组实现。平时使用最多的是二叉堆。二叉堆易于存储&#xff0c;并且便于索引。堆数据结构像树&#xff0c;但…

前端开发深入了解性能优化

前置知识 图片预加载 图片预加载是指在用户访问网页时&#xff0c;提前加载一些图片资源&#xff0c;以便在用户需要查看这些图片时能够更快地显示 原理&#xff1a; 提前请求&#xff1a;在页面加载时&#xff0c;浏览器会发送请求获取图片资源。预加载通常使用 JavaScrip…

OpenGL 原生库6 坐标系统

概述 为了将坐标从一个坐标系变换到另一个坐标系&#xff0c;我们需要用到几个变换矩阵&#xff0c;最重要的几个分别是模型(Model)、观察(View)、投影(Projection)三个矩阵。我们的顶点坐标起始于局部空间(Local Space)&#xff0c;在这里它称为局部坐标(Local Coordinate)&a…