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

(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.mzph.cn/news/55785.shtml

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

相关文章

【集合学习ConcurrentHashMap】ConcurrentHashMap集合学习

ConcurrentHashMap集合学习 一、JDK1.7 和 1.8 版本ConcurrenHashMap对比分析 JDK 1.7版本 在JDK 1.7版本ConcurrentHashMap使用了分段锁的方式&#xff08;对Segment进行加锁&#xff09;&#xff0c;其实际结构为&#xff1a;Segment数组 HashEntry数组 链表。由很多个 …

Shiro认证框架

目录 概述 认证授权及鉴权 Shiro框架的核心组件 基本流程 spring bootshiromybatisPlus...实现用户登录 step1:准备工作 (1)坐标 (2)连接数据库 (3)JavaBean (4)dao数据访问层 (5)密码工具类 DigestsUtil (6)配置类 step2&#xff1a;认证功能 step3:授权鉴权 概述…

一文1500字从0到1搭建 Jenkins 自动化测试平台

Jenkins 自动化测试平台的作用 自动化构建平台的执行流程&#xff08;目标&#xff09;是&#xff1a; 我们将代码提交到代码托管工具上&#xff0c;如github、gitlab、gitee等。 1、Jenkins要能够检测到我们的提交。 2、Jenkins检测到提交后&#xff0c;要自动拉取代码&#x…

leetcode.105 从前序和中序遍历序列构造二叉树

题目描述&#xff1a; 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一 棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 题目要求&#xff1a; 1 < preorder.length < 3000inorder.length…

软件工程(十四) 设计模式之结构型模式(二)

1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…

【算法专题突破】双指针 - 快乐数(3)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;202. 快乐数 - 力扣&#xff08;Leetcode&#xff09; 这道题的题目也很容易理解&#xff0c; 看一下题目给的示例就能很容易明白&#xff0c; 但是要注意一个点&#…

MyBatis之动态sql

目录 一、MyBatis动态sql 1.1 是什么 1.2 作用 1.3 优点 1.4 特殊标签 1.5 代码演示 二、#和$的区别 2.1 #使用 2.2 $使用 2.3 综合 2.4 代码演示 三、resultType与resultMap的区别 3.1 关于resultType 3.2 关于resultMap 3.3 两者区别 3.4 代码演示 一、MyBati…

退出屏保前玩一把游戏吧!webBrowser中网页如何调用.NET方法

本文主要以 HackerScreenSaver 新功能的开发经历介绍 webBrowser中网页如何调用.NET方法的过程。 1. 背景 之前开源了一款名为 HackerScreenSaver 的 Windows 屏保程序。该程序具有模拟黑客炫酷界面的特点&#xff0c;用户可以将自定义的网页作为锁屏界面。不久前&#xff0c;…

【C++笔记】C++之类与对象(下)

【C笔记】C之类与对象(下&#xff09; 1、再看构造函数1.1、构造函数的初始化列表1.2、C支持单参数的构造函数的隐式类型转换1.3、匿名对象 2、Static成员2.1、为什么要有静态成员变量&#xff1f;2.2、一个类的静态成员变量属于这个类的所有对象2.3、静态成员函数 3、友元3.1、…

基于体素形态学测量分析(VBM)的工具包比较及其在年龄预测中的应用

摘要 基于体素的形态学测量分析(VBM)通常用于灰质体积(GMV)的局部量化。目前存在多种实现VBM的方法。然而&#xff0c;如何比较这些方法及其在应用中的效用(例如对年龄效应的估计)仍不清楚。这会使研究人员疑惑他们应该在其项目中使用哪种VBM工具包。本研究以用户为中心&#…

基于单片机的智能数字电子秤proteus仿真设计

一、系统方案 1、当电子称开机时&#xff0c;单片机会进入一系列初始化&#xff0c;进入1602显示模式设定&#xff0c;如开关显示、光标有无设置、光标闪烁设置&#xff0c;定时器初始化&#xff0c;进入定时器模式&#xff0c;如初始值赋值。之后液晶会显示Welcome To Use Ele…

摆动序列【贪心算法】

摆动序列 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 class Solution {public int wiggleMaxLength(int…

老胡的周刊(第105期)

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 Piwigo[2] Piwigo 是一个开源的网络照片库软…

BM80 买卖股票的最好时机(一)

目录 1.题目描述 2.题目分析 3.编写代码 4.总结 这是牛客网上的一道题目 1.题目描述 题目链接&#xff1a;买卖股票的最好时机(一)_牛客题霸_牛客网 (nowcoder.com) 2.题目分析 我们看到这个题目中一个数组表示每一天的股价&#xff0c;那么最大利润怎么算呢&#xff0c…

WebGL矩阵变换

目录 变换矩阵&#xff1a;旋转 变换矩阵&#xff1a;平移 44的旋转矩阵 示例代码&#xff1a; gl.uniformMatrix4fv&#xff08;&#xff09;规范 平移&#xff1a;相同的策略 变换矩阵&#xff1a;缩放 变换矩阵&#xff1a;旋转 对于简单的变换&#xff0c;你可以使用…

【微服务】02-集成事件与MediatR

文章目录 1.集成事件1.1 定义1.2 集成事件工作原理1.3 总结 2.使用RabbitMQ来实现EventBus2.1 RabbitMQ安装2.2 CAP框架实现RabbitMQ2.2.1 CAP框架实现架构2.2.2 CAP框架实现原理 3.MediatR3.1 使用Mediator实现命令查询职责分离模式(CQRS)3.1.1 核心对象 3.2 处理领域事件3.2.…

Java线程 - 详解(1)

一&#xff0c;创建线程 方法一&#xff1a;继承Thread类 class MyThread extends Thread{Overridepublic void run() {System.out.println("线程1");} }public class Test {public static void main(String[] args) {MyThread myThread new MyThread();myThread.…

【C语言】2023.8.27C语言入学考试复盘总结

前言 本篇文章记录的是对于2023年8月27日的 C语言 的入学考试的整理总结 成绩&#xff1a;220/240 题目&#xff1a;9/12 错题整理 首先先对于我没做出来的三道题做一个整理 错题1&#xff1a;7-4 分段函数PLUS 题干 以下是一个二元分段函数&#xff0c;请你根据所给的函…

android系统启动流程之init启动分析

先根据上图来描述下安卓整个系统的启动流程&#xff1a; 当上电时&#xff0c;系统先执行BootRom, 加载引导程序执行。 然后进入bootloader&#xff0c;在安卓系统中基本上这个bootloader是uboot, 通过uboot引导启动内核&#xff0c;此时运行在kernel空间&#xff0c;这时的i…

基于全新电脑环境安装pytorch的GPU版本

前言&#xff1a; 距离第一次安装深度学习的GPU环境已经过去了4年多&#xff08;当时TensorFlow特别麻烦&#xff09;&#xff0c;现在发现安装pytorch的GPU版本还是很简单方便的&#xff0c;流程记录如下。 安装步骤&#xff1a; 步骤一&#xff1a;官网下载Anaconda Free…