Vue2 +Element UI 表格行合并

news2025/2/28 6:26:04

如果相邻数据是一致的,则单元格的行合并,指定需要合并的列,下面我是指定合并了分类和类型这两列。
先看效果
在这里插入图片描述Element UI为我们的<el-table>提供了一个属性span-method:合并行或列的计算方法
下面是一个示例:

html部分 - 主要是在表上指定span-method方法

<template>
  <div>
    <el-table :span-method="objectSpanMethod" :data="tableData" row-key="id" border>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="分类" align="center"></el-table-column>
      <el-table-column prop="num" label="数量" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
    </el-table>
  </div>
</template>

data部分 - 表格数据

data() {
    return {
      tableData: [{
        name: '咖啡',
        num: '2',
        type: '饮料'
      },
        {
          name: '咖啡',
          num: '5',
          type: '饮料',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '巧克力',
          num: '2',
          type: '高热量食品',
        }, {
          name: '牛奶',
          num: '2',
          type: '蛋白质',
        }]
    }
  }

methods部分 - span-method方法,行合并的逻辑

methods: {
    // table合并列
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let data = this.tableData; // 拿到当前table中的数据
      let cellValue = row[column.property]; // 获取当前位置的值
      let sortArr = ['name', 'type']; // 需要合并的字段(用于合并行的属性)
      if (cellValue && sortArr.includes(column.property)) {
        let prevRow = data[rowIndex - 1]; // 获取上一行的数据
        let nextRow = data[rowIndex + 1]; // 获取下一行的数据
        if (prevRow && prevRow[column.property] === cellValue) { // 当有上一行的数据,并且与当前值相等时
          return {rowspan: 0, colspan: 0}; // 返回一个对象,表示不需要合并单元格
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) { // 当有下一行的数据并且与当前值相等时,获取新的下一行数据
            nextRow = data[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1}; // 返回一个对象,表示需要合并行单元格
          }
        }
      }
    },
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1087244.html

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

相关文章

安装项目运行环境(python依赖包+allure)

目录 一、安装自动化项目依赖包1.导出项目依赖库2.上传到远程仓库3.进入jenkins容器内&#xff0c;检查是否安装git4.配置git用户信息5.生成秘钥6.把代码拉取下来7.安装python项目依赖8.运行项目 二、安装allure1.jenkins容器内安装allure&#xff0c;进入/usr/local/2.下载all…

Umi + React + Ant Design Pro + TS 项目搭建

新建项目目录 mkdir 【项目名称】在对应目录 D:\react\demo 中&#xff0c;安装 Umi 脚手架&#xff1a; yarn create umi接下来&#xff0c;安装将要用到的相关依赖 umijs/plugins&#xff1a; npm i umijs/plugins -Dumijs/plugins 是 Umi 的官方插件集&#xff0c;包含了…

在 TensorFlow 中调试

如果调试是消除软件错误的过程&#xff0c;那么编程一定是添加错误的过程。Edsger Dijkstra。来自 https://www.azquotes.com/quote/561997 一、说明 在这篇文章中&#xff0c;我想谈谈 TensorFlow 中的调试。 在之前的一些帖子&#xff08;此处、此处和此处&#xff09;中&…

RK3568平台开发系列讲解(驱动篇)Linux自带LED子系统驱动实验

🚀返回专栏总目录 文章目录 一、LED 驱动使能二、 Linux 内核自带 LED 驱动简介2.1、LED 灯驱动框架分析2.2、module_platform_driver 函数简析2.3、gpio_led_probe 函数简析三、设备树节点编写四、测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢我们以前都是自…

UE5中双pass解决半透明材质乱序问题

透明度材质乱序问题一直是半透明效果时遇到的比较多的问题&#xff0c;用多pass方案只能说一定程度上解决&#xff0c;当遇到多半透明物体穿插等情况时&#xff0c;仍然不能完美解决。 双pass方案Unity用的比较多&#xff0c;因为Unity支持多个pass绘制。在UE中我们可以以复制多…

【开源】给ChatGLM写个,Java对接的SDK

作者&#xff1a;小傅哥 - 百度搜 小傅哥bugstack 博客&#xff1a;bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 大家好&#xff0c;我是技术UP主小傅哥。 清华大学计算机系的超大规模训练模型 ChatGLM-130B 使用效果非常牛&…

【Qt之QTableWidget和QTreeWidget】树悬停、选择样式及表格表头和首行间隔线

QTableWidget设置表头与首行间隔线 win10 实例化QTableWidget后&#xff0c;表格表头和首行中间无间隔线&#xff0c;以下是通过样式表进行设置&#xff1a; // 设置横向表格头的间隔线&#xff0c;可设置四个方向的间隔线,不需要间隔线的可以设置为0px// border-left:0px sol…

同城本地顺风车微信小程序源码系统,前端+后端完整搭建教程

大家好&#xff0c;今天要给大家分享一款同城本地顺风车微信小程序源码系统&#xff0c;同城本地顺风车微信小程序源码系统是一种基于互联网和移动社交平台的顺风车服务系统&#xff0c;搭建起来也十分简单。 系统特色功能一览&#xff1a; 地图定位&#xff1a;用户可以通过地…

C#中的Dispatcher:Invoke与BeginInvoke的使用

Dispatcher是.NET框架中的一个重要概念&#xff0c;用于处理异步消息传递。在C#中&#xff0c;Dispatcher提供了两种方法&#xff1a;Invoke和BeginInvoke&#xff0c;用于控制线程上消息的顺序和执行方式。 目录 一、Dispatcher.Invoke二、Dispatcher.BeginInvoke三、使用场景…

极简c++(4)类的静态成员

静态数据成员 ::是作用域操作符&#xff01; #include<iostream> using namespace std;class Point{private:int x,y;public:point(int x 0,int y 0):x(x),y(y){}~point();int getX(){return x;}int getY(){return x;} }假设需要统计点的个数&#xff0c;考虑添加一个…

Krypton控件组使用之KryptonRibbon

1.去掉File按钮 2.去掉 Cutomize 菜单

安规电容总结

安规电容 顾名思义&#xff1a;电容即使失效后&#xff0c;也不会漏电或者放电伤人&#xff0c;要符合安全规定 多数高压认证产品都需要。 上图&#xff1a; X电容&#xff1a; Y电容&#xff1a; 区别&#xff1a; 电路示意&#xff1a;

安卓配置图标——Qt For Android

前言 相对于给PC端配置图标&#xff0c;给移动端配置有点复杂。 在做跨平台方面&#xff0c;我遵循的原则是能用Qt解决的&#xff0c;就使用Qt的方法&#xff0c;毕竟我对Qt还是很熟悉的。在配置图标方面&#xff0c;界面中所有风格样式都是可以通过qss配置的&#xff1b;平台…

使用 Apache Camel 和 Quarkus 的微服务(五)

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 在本系列的第三部分中&#xff0c;我们了解了如何在 Minikube 中部署基于 Quarkus/Camel 的微服务&#xff0c;这是最常用的 Kubernetes 本地实现之一。虽然这样的本地…

198、RabbitMQ 的核心概念 及 工作机制概述; Exchange 类型 及 该类型对应的路由规则;了解什么是JMS。

目录 JMS 讲解★ RabbitMQ的核心概念★ RabbitMQ工作机制★ Connection&#xff08;连接&#xff09; 与 Channel&#xff08;通信信道&#xff09;★ Exchange★ Exchange与Queue★ Exchange的类型&#xff08;4种&#xff09;及 该类型对应的路由规则 看RabbitMQ 之前&#x…

适合学生写作业的台灯有哪些?双十一学生台灯推荐清单

现在很多家长为了娃的学习需求&#xff0c;基本都会备上一盏台灯&#xff0c;但桌面台灯有其无法避免的局限性&#xff0c;比如&#xff1a;光照范围不够大、光线过度集中、光线均匀度不足、产生眩光等问题&#xff0c;可能会对孩子的视力健康带来不利影响。 因此建议大家选择…

兴趣社如何搭建一个兴趣社区?

社交产品的本质是帮助用户提升社交的质量与效率&#xff0c;而兴趣则是找到本质的捷径。用户对兴趣社区的使用主要是围绕兴趣爱好&#xff0c;社交属性以及粉丝活动三个方向。对感兴趣的话题&#xff0c;用户天然有更强的分享讨论欲&#xff0c;更期待与人社交互动。“越垂直的…

通过Moonbeam路由流动性,如何转移token至Hydra?

在Moonbeam路由流动性&#xff08;Moonbeam Routed Liquidity&#xff09;功能下&#xff0c;用户在简洁的界面即可从如以太坊、Solona、Polygon、Avalanche等生态将流动性转移至波卡平行链。 开始操作前&#xff0c;请先准备以下条件&#xff1a; 原始链上的资产 原始链上的g…

[elasticsearch]使用postman来查询数据

最近需要debug程序&#xff0c;debug的时候需要查找elasticsearch里面的数据是否正确。 第一步建立一个post请求&#xff0c;并按照图下的方式填上ur和参数&#xff1a; 发送post请求&#xff0c;url为&#xff1a; http://ip:port/index_name/_search我这里查询的是title字…

spring cloud config pattern 用法

看了官网,对pattern用法的讲解,感觉讲的不是很清楚,只是讲了 config server端的配置,没有讲清楚如果从 client 端连接 config server 端的话,需要怎么配置,其中最重要的就是怎么对pattern进行识别,摸锁了一段时间,搞清楚了pattern的用法 springboot version:3.0.4 s…