vue table id一样的列合并

合并场景:如果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.rhkb.cn/news/428820.html

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

相关文章

低代码可视化工具-uniapp页面跳转传参-代码生成器

uniapp页面跳转传参 在uni-app中&#xff0c;页面间的跳转和传参是一个常见的需求。uni-app提供了多种页面跳转方式&#xff0c;如uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab、uni.navigateBack等&#xff0c;每种方式适用于不同的场景。以 页面跳转并传参…

【用Java学习数据结构系列】对象的比较(Priority Queue实现的前提)

看到这句话的时候证明&#xff1a;此刻你我都在努力 加油陌生人 个人主页&#xff1a;Gu Gu Study 专栏&#xff1a;用Java学习数据结构系列 喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者&#xff…

加密与安全_优雅存储二要素(AES-256-GCM )

文章目录 什么是二要素如何保护二要素&#xff08;姓名和身份证&#xff09;加密算法分类场景选择算法选择AES - ECB 模式 (不推荐)AES - CBC 模式GCM&#xff08;Galois/Counter Mode&#xff09;AES-256-GCM简介AES-256-GCM工作原理安全优势 应用场景其他模式 和 敏感数据加密…

MySQL:库表的基本操作

库操作 查看 查看存在哪些数据库&#xff1a; show databases;查看自己当前处于哪一个数据库&#xff1a; select database(); 由于我不处于任何一个数据库中&#xff0c;此处值为NULL 查看当前有哪些用户连接到了MySQL&#xff1a; show processlist; 创建 创建一个数据库 语…

前端web端项目运行的时候没有ip访问地址

我们发现 没有netWork 的地址 导致 团队内其他同学无法打开我们的地址 进行访问 在page.json 中的运行 指令中 添加 --host 记得加上空格 这样我们就可以看到这个地址了 团队其他同学 就可以访问我们这个地址了

Tomcat服务器—Windows下载配置详细教程

一、关于 1.1 简介 Tomcat是一个开源的Java Servlet容器和Web服务器&#xff0c;由Apache软件基金会维护。它实现了Java Servlet和JavaServer Pages (JSP) 规范&#xff0c;用于运行Java Web应用程序。Tomcat支持多种Java EE功能&#xff0c;并提供了高效的性能和可扩展性&am…

我的AI工具箱Tauri版-VideoDuplication视频素材去重

本教程基于自研的AI工具箱Tauri版进行VideoDuplication视频素材去重。 该项目是基于自研的AI工具箱Tauri版的视频素材去重工具&#xff0c;用于高效地处理和去除重复视频内容。用户可以通过搜索关键词"去重"或通过路径导航到"Python音频技术/视频tools"模…

Linux内核移植实战总结

直接参考【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 本文仅作为个人笔记使用&#xff0c;方便进一步记录自己的实践总结。 前两章我们简单了解了一下 Linux 内核顶层 Makefile 和 Linux 内核的启动流程&#xff0c;本章我们就来学习一下如何将 NXP官方提供的 Linux 内核移…

电脑网络怎么弄动态ip :步骤详解与优势探讨

在当今的数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。对于大多数用户而言&#xff0c;动态IP地址是一种便捷且常用的网络配置方式&#xff0c;它允许设备在每次连接到网络时自动获取一个新的IP地址。这种设置不仅简化了网络管理&#xff0c;还…

Cypress安装与启动(开始学习记录)

一 Cypress安装 使用npm安装 1.查看node.js npm的版本&#xff0c;输入 npm --version 和 node --version&#xff0c;node.js没安装的可以去中文网下载最新稳定版安装&#xff0c;npm不建议升级到最新版本&#xff0c;会导致安装Cypress时Error: Cannot find module ansi-st…

一个基于 laravel 和 amis 开发的后台框架, 友好的组件使用体验,可轻松实现复杂页面(附源码)

前言 随着互联网应用的发展&#xff0c;后台管理系统的复杂度不断增加&#xff0c;对于开发者而言&#xff0c;既要系统的功能完备&#xff0c;又要追求开发效率的提升。然而&#xff0c;传统的开发方式往往会导致大量的重复劳动&#xff0c;尤其是在构建复杂的管理页面时。有…

MQ入门(4)

Erlang&#xff1a;面向高并发的 单机的吞吐量就是并发性&#xff1a;Rabbitmq是10w左右&#xff08;现实项目中已经足够用了&#xff09;&#xff0c;RocketMQ是10w到20w&#xff0c;Kafka是100w左右。 公司里的并发&#xff08;QPS&#xff09; 大部分的公司每天的QPS大概…

Elionix 电子束曝光系统

Elionix 电子束曝光系统 - 上海纳腾仪器有限公司 -

【FreeRTOS】信号量

1.概念 当访问一个共享资源时&#xff0c;两个任务&#xff0c;并发访问出现不一致的问题&#xff0c;需要通过信号量解决 那么信号量是如何解决这个问题的呢&#xff1f; 任务量你可以认为是一把锁&#xff0c;一个任务拿到这个锁之后访问这个临界资源&#xff0c; 其他任务…

如何设计出一个比较全面的测试用例

目录 1. 测试用例的基本要素(不需要执行结果) 2. 测试用例的给我们带来的好处 3. 用例编写步骤 4. 设计测试用例的方法 4.1 基于需求进行测试用例的设计 4.2 具体的设计方法 1.等价类 2.边界值 3.判定表&#xff08;因果图&#xff09; 4.正交表法 5.场景设计法 6.错误猜测…

视频去噪技术分享

视频去噪是一种视频处理技术&#xff0c;旨在从视频帧中移除噪声和干扰&#xff0c;提高视频质量。噪声可能由多种因素引起&#xff0c;包括低光照条件、高ISO设置、传感器缺陷等。视频去噪对于提升视频内容的可视性和可用性至关重要&#xff0c;特别是在安全监控、医疗成像和视…

【MySQL】基础部分——DDL,DML,DQL,DCL,函数,约束,多表查询,事务

个人学习记录&#xff0c;供以后回顾和复习 ubuntu下安装使用1.DDL&#xff0c;DML&#xff0c;DQL&#xff0c;DCLDDL数据库表 DML增改删 DQL条件查询分组查询排序查询分页查询 DCL管理用户权限控制 2.函数字符串函数数值函数日期函数流程函数 3.约束4.多表查询多表关系内连接…

【Git必看系列】—— Git巨好用的神器之git stash篇

应用场景 当我们开发一个新功能时会先从master拉出一个分支dev&#xff0c;然后在这个dev分支下吭哧吭哧的开始写代码开发新功能&#xff0c;就如下代码所示&#xff0c;我们在dev分支下开发Person类的新功能getId() public class Person {private int id;private String nam…

零工市场小程序:推动零工市场建设

人力资源和社会保障部在2024年4月发布了标题为《地方推进零工市场建设经验做法》的文章。 零工市场小程序的功能 信息登记与发布 精准匹配、推送 在线沟通 权益保障 零工市场小程序作为一个找零工的渠道&#xff0c;在往后随着技术的发展和政策的支持下&#xff0c;功能必然…

C++——初步认识C++和namespace的用法

1.编程语言排行榜 我们通过排行可以看出 C在变成语言中还是占据着重要的地位 2.C在工作领域中的应用 1.PC客户端开发。⼀般是开发Windows上的桌面软件&#xff0c;比如WPS之类的&#xff0c;技术栈的话⼀般是C和 QT&#xff0c;QT 是⼀个跨平台的 C图形用户界面&#xff08;G…