(vue)el-table 怎么把表格列中相同的数据 合并为一行

news/2024/4/20 20:41:03/

(vue)el-table 怎么把表格列中相同的数据 合并为一行


效果:

在这里插入图片描述


文档解释:

在这里插入图片描述

写法:

<el-table:data="tableData"size="mini"class="table-class"borderstyle="width:100%"max-height="760":span-method="objectSpanMethod"
>// 合并table单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {  //定位到维度列// 获取当前单元格的值const currentValue = row[column.property];// 获取上一行相同列的值const preRow = this.tableData[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;// 如果当前值和上一行的值相同,则将当前单元格隐藏if (currentValue === preValue) {return { rowspan: 0, colspan: 0 };} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1;for (let i = rowIndex + 1; i < this.tableData.length; i++) {const nextRow = this.tableData[i];const nextValue = nextRow[column.property];if (nextValue === currentValue) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}
},

解决参考:https://blog.csdn.net/qq_42174597/article/details/130602030


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

相关文章

AIGC的发展

AIGC&#xff08;Artificial Intelligence Generated Content&#xff09;&#xff0c;即人工智能生产内容&#xff0c;是人工智能在内容领域的最新进展。AIGC利用人工智能算法通过分析大量数据集&#xff0c;自动生成具有特定风格和主题的内容。AIGC涵盖了多种应用领域&#x…

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…

Ansible 临时命令搭建安装仓库

创建一个名为/ansible/yum.sh 的 shell 脚本&#xff0c;该脚本将使用 Ansible 临时命令在各个受管节点上安装 yum 存储库. 存储库1&#xff1a; 存储库的名称为 EX294_BASE 描述为 EX294 base software 基础 URL 为 http://content/rhel8.0/x86_64/dvd/BaseOS GPG 签名检查为…

若依二次开发

目录 本地启动 前端代码 后端代码 代码适配 数据表初始化 远程部署

基于java羽毛球馆管理系统设计与实现

摘 要 时代的变化速度实在超出人类的所料&#xff0c;21世纪&#xff0c;计算机已经发展到各行各业&#xff0c;各个地区&#xff0c;它的载体媒介-计算机&#xff0c;大众称之为的电脑&#xff0c;是一种特高速的科学仪器&#xff0c;比人类的脑袋要灵光无数倍&#xff0c;什么…

【大数据】Linkis 简述

Linkis 简述 1.引言2.背景3.设计初衷4.技术架构5.业务架构6.处理流程7.如何支撑高并发8.用户级隔离度和调度时效性9.总结 Linkis 是微众银行开源的一款 数据中间件&#xff0c;用于解决前台各种工具、应用&#xff0c;和后台各种计算存储引擎间的连接、访问和复用问题。 1.引言…

java笔试手写算法面试题大全含答案

1.统计一篇英文文章单词个数。 public class WordCounting { public static void main(String[] args) { try(FileReader fr new FileReader("a.txt")) { int counter 0; boolean state false; int currentChar; while((currentChar fr.read()) ! -1) { i…

2308d8月会议

原文 罗伯特 罗伯特说他很高兴.Dennis问编译器是否足够快. 他只是想在编译器中看到LSP支持,并利用所有好东西. Walter指出,他一直致力于提高编译速度.他发现编译器是带异常编译的,所以他一直在努力无异编译,看看这对速度有什么影响. 亚当说他的库在半秒钟内完成编译.罗伯特说…

详解!视频云存储/安防监控视频AI智能分析平台区域入侵/周界报警功能

区域入侵/周界报警入侵检测技术是TSINGSEE青犀智能分析平台推出的一种视频监控系统&#xff0c;可检测划定区域内是否有可疑人员并且在检测出这样的事件时生成警报。 视频监控/安防监控/视频存储TSINGSEE青犀视频智能分析平台可以在监控范围内划定特定区域&#xff0c;有人员入…

如何选择合适的量化交易服务器

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

uniapp 微信小程序 路由跳转

保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({url: test?id1&name"lisa" }); uni.redirectTo(OBJECT) 关闭当前页面&#xff0c;跳转到应用…

存储IO路径:Linux下的“快递之旅”

相信大家都有过网购的经历,当我们在电商平台上浏览心仪的商品并下单时,快递小哥会负责将物品从商家手中送至我们手中。在这个过程中,快递小哥需要经过一系列的流程才能将物品准确送达。同样,在Linux系统中,当用户下发一笔读写操作时,这些数据也需要经过一系列的流程才能最…

表现层消息一致性处理

设计表现层返回结果的模型类&#xff0c; 用于后端与前端进行数据格式统一&#xff0c;也称为前后端数据协议 Data public class R {private Boolean flag;private Object data;private String msg;public R(){}public R(Boolean flag){this.flag flag;}public R(Boolean fla…

Rust 基础入门 —— 2.3.所有权和借用 (二)

引用和借用 我们之前说了很多&#xff0c;总结一句话&#xff1a;所有权&#xff0c;让代码可以免去内存回收的问题&#xff0c;但不方便开发。解决方式&#xff0c;就是引用和借用。 这里我们具体介绍这个概念。 是什么&#xff1f; 引用和借用是一个事情&#xff0c;表示…

TUME儿童毛毯上架亚马逊做CPC认证测试

毛毯(英文Blanket)&#xff0c;是一种常用的床上用品&#xff0c;具有保暖功能&#xff0c;与被子相比较薄。其原料多采用动物纤维&#xff08;如羊毛、马海毛、兔毛、羊绒、驼绒、牦牛绒&#xff09;或腈纶、粘胶纤维等化学纤维&#xff0c;也有的是动物纤维与化纤混纺制成的。…

docker-java

一 所需依赖包 <dependency><groupId>com.github.docker-java</groupId><artifactId>docker-java</artifactId><version>3.3.3</version> </dependency> 二 前期准备 2.1 docker已安装 2.2 运行程序用户的docker使用权限 …

国产化-达梦数据库安装2

目录 DM8数据库下载地址 安装一路狂飙next 启动服务 随着国家政府的推广、越来越多的政府项目、在系统部署需要采购国产服务器、数据库等 DM8数据库下载地址 https://eco.dameng.com/download/ 安装一路狂飙next windos安装比较简单直接next即可 仅仅记录几个关键疑问地方k…

07-Vue基础之综合案例——小黑记事本

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…

Zabbix监控系统最新版安装

setenforce 0 设置SELinux 成为permissive模式 临时关闭selinux的 [rootwww yum.repos.d]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo % Total % Received % Xferd Average Speed Time Time Time Current …

04架构管理之分支管理实践-一种git分支管理最佳实践

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…