【前端】vue中合并表格行

news2024/11/16 11:32:44

做平台功能时,遇到一个需求是需要将表格某列有相同值时进行合并展示,比如

1、通过在Element中得知需要在表格中增加span-method方法

<el-table
      :data="tableData"
      :span-method="cellMerge"
      border
      style="width: 100%; margin-top: 20px">

2、cellMerge的实现如下,columnIndex是要合并行的哪一列,0为第一列,1为第二列

cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {   
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

3、上面的spanArr方法是为了判断当前元素与上一个元素是否相同,实现如下,其中serviceCode是要合并的列名,

getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr = []
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].serviceCode === data[i - 1].serviceCode) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },

4、在对应接口返回的list结束后记得调用下getSpanArr方法

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

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

相关文章

LeetCode算法心得——打家劫舍(记忆化搜索)

大家好&#xff0c;我是晴天学长&#xff0c;准备开始深入动态规划啦&#xff0c;先从记忆化搜索开始&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃…

如何选择适合的开源框架来构建微服务架构?

随着科技的飞速发展&#xff0c;云计算和大规模应用的需求日益显著&#xff0c;这促使微服务架构在软件开发领域中占据了主流地位。微服务架构的广泛应用为开发人员提供了灵活性、可伸缩性和高可用性&#xff0c;从而推动了快速的应用程序开发。然而&#xff0c;在构建微服务架…

React函数组件渲染两次

渲染两次是因为react默认开启了严格模式 React.StrictMode标签作用&#xff1a; 1、识别不安全的生命周期 2、关于使用过时字符串 ref API 的警告 3、关于使用废弃的 findDOMNode 方法的警告 4、检测意外的副作用 5、检测过时的 context API 注释掉React.StrictMode即为关闭严…

2024测试工程师必学系列之Jmeter(36):jmeter对图片验证码的处理

jmeter对图片验证码的处理 在web端的登录接口经常会有图片验证码的输入&#xff0c;而且每次登录时图片验证码都是随机的&#xff1b;当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段&#xff0c;然后再登录接口中使用&#xff1b; 通过jmeter对图片验证码…

【蓝桥杯省赛真题44】Scratch像素画板 蓝桥杯少儿编程scratch图形化编程 蓝桥杯省赛真题讲解

scratch像素画板 第十四届青少年蓝桥杯scratch编程省赛真题 一、题目要求 编程实现 1.点击绿旗,角色、背景如图所示(三种颜色调色盘、清除图标及方格角色请自行创建,点击绿旗后立刻呈现下图效果); 2.用鼠标点击红色调色盘,红色调色盘变为选中状态(如下图所示),此时鼠…

实战 | SQL注入漏洞

在页面参数增加 and -1-1&#xff0c;页面回显正常 这里如果 and 11 会被拦截 然后尝试-1-2 页面报错&#xff0c;此处存在数字型sql注入漏洞 接下来就是查字段数 order by 1 页面依旧报错 如果大家在渗透的时候遇到这种情况 要考虑是不是某些参数被拦截等 换一种思路&#xf…

SQL常见函数整理 —— lead()向下偏移

1. 用法 是在窗口函数中使用的函数&#xff0c;它用于获取当前行的下一行&#xff08;后一行&#xff09;的某个列的值。具体来说&#xff0c;LEAD() 函数可用于查找任何给定行的下一行&#xff08;后一行&#xff09;的值&#xff0c;同时也可控制行数偏移量&#xff08;offse…

ChainLight zkSync Era漏洞揭秘

1. 引言 ChainLight研究人员于2023年9月15日&#xff0c;发现了zkSync Era主网的ZK电路的一个soundness bug&#xff0c;并于2023年9月17日&#xff0c;向Matter Labs团队报告了该问题。Matter Labs团队修复了该问题&#xff0c;并奖励了ChainLight团队5万USDC——为首个zkSync…

用Auth Analyzer插件批量测试接口越权,安全测试快人一步!

随着信息化技术的不断发展&#xff0c;软件安全成了软件行业的重大挑战&#xff0c;因此安全测试也成为了测试人员必备的技能之一。 沐沐在安全测试过程中较为常见的就是接口越权漏洞&#xff0c;在尝试过多种工具进行越权漏洞测试后&#xff0c;最终找到了个人认为最便捷最有…

ModBus TCP/RTU 报文解析

Modbus Tcp https://gitee.com/szwzhsz/Modbus-TCP-client-server-DotNetty.?_fromgitee_search 固定协议格式 事务标识(2byte)&#xff1a;00 00&#xff0c;可变(递增) 协议标识(2byte)&#xff1a;00 00&#xff0c;固定 长度(2byte)&#xff1a;00 06&#xff0c;可变 单…

【GUI】-- 10 贪吃蛇小游戏之静态面板绘制

GUI编程 04 贪吃蛇小游戏 4.1 第一步&#xff1a;先绘制一个静态的面板 首先&#xff0c;需要新建两个类&#xff0c;一个StartGame类作为游戏的主启动类&#xff1b;一个GamePanel类作为游戏的面板类。此外&#xff0c;再新建一个Data类作为数据中心(存放了小蛇各部分图像的…

目标文件(ELF格式)

1.linux中有三类目标文件 **&#xff08;1&#xff09;可重定位目标文件&#xff08;.o或者.a&#xff09;&#xff1a;**包含二进制代码和数据&#xff0c;其形式可以和其他目标文件进行合并&#xff0c;创建一个可执行目标文件。&#xff08;.a文件是由很多个.o文件的集合&a…

解决uncompyle6反编译报错KeyError

报错内容&#xff1a;KeyError&#xff1a;3.11.0 &#xff08;这个是我自己的Python版本号&#xff09; 主要原因就是你的Python版本没在它库文件支持的版本里&#xff0c;我们需要进行手动添加即可。 首先找到文件&#xff1a;magics.py 我的是在这个路径下&#xff1a;D:\…

《QT从基础到进阶·三十六》QWidget实现收缩栏的效果

功能&#xff1a; 1、可以在收缩栏插件中添加界面 2、可以把界面展开或收缩 3、可以用鼠标拖动界面改变界面的排放顺序 源码放在最下方 1、可以在收缩栏插件中添加界面 virtual void addWidget(QWidget* widget, const QString& label, const QIcon& icon QIcon())…

基于单片机加热炉多参数检测和PID炉温系统

**单片机设计介绍&#xff0c; 基于单片机加热炉多参数检测和PID炉温系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态&#xff0c;并在发生异常情况…

华为云IoT与OpenHarmony深度协同,加速设备上鸿即上云【云驻共创】

本次专题论坛探讨了华为云IoT与Open Harmony的深度协同、边缘屏蔽硬件差异、实现智慧隧道全方位智能化管理&#xff0c;以及华为云与Open Harmony生态的合作。同时也介绍了华为云物联网卡平台、HTTP2协议以及华为物联网在交通领域的应用。 一&#xff0e;华为云IoT与Open Harm…

了解一下公网IP和域名的区别与联系

​  公网IP和域名是互联网中两个重要的概念&#xff0c;它们在网络通信和网站访问中起着不同的作用。 我们来了解一下公网IP。公网IP是指在全球范围内唯一的IP地址&#xff0c;用于标识互联网上的设备。每个设备连接到互联网时都会被分配一个公网IP地址&#xff0c;这个地址可…

手把手设计C语言版循环队列(力扣622:设计循环队列)

文章目录 前言描述分析力扣AC代码 力扣&#xff1a; 622.设计循环队列 前言 队列会出现“假溢出”现象&#xff0c;即队列的空间有限&#xff0c;队列是在头和尾进行操作的&#xff0c;当元素个数已经达到最大个数时&#xff0c;队尾已经在空间的最后面了&#xff0c;但是对头…

北邮22级信通院数电:Verilog-FPGA(0)怎么使用modelsim进行仿真?modelsim仿真教程一份请签收~

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 最近很多uu问我怎么用quartus连接的modelsim软件进…

【Ubuntu】Ubuntu arm64 部署 Blazor Server 应用

部署步骤 发布安装运行环境&#xff1a;dotnet-sdk&#xff08;必装&#xff09;、aspnetcore-runtime、dotnet-runtime安装证书设置环境变量&#xff1a;临时变量、当前用户永久变量、所有用户的永久变量运行&#xff1a;终端运行、后台运行 基本情况 开发系统环境 系统&am…