【前端】vue中合并表格行

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

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

<el-table:data="tableData":span-method="cellMerge"borderstyle="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 : 0return {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] += 1this.spanArr.push(0)} else {this.spanArr.push(1)this.pos = i}}}},

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

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

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

相关文章

苍穹外卖遇到的问题—员工分页查询

项目场景&#xff1a; 系统中的员工很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&#xff0c;不便于查看&#xff0c;所以一般的系统中都会以分页的方式来展示列表数据。而在我们的分页查询页面中, 除了分页条件以外&#xff0c;还有一个查询条件 “员工姓…

kubeadm join 192.168.10.16:6443 --token xxx报错Failed to request cluster-info

1、node节点执行 kubeadm join 192.168.10.16:6443 --token hak4zi.hrib9uv4p62t1uok --discovery-token-ca-cert-hash sha256:4337638eef783ee6a66045ad699722079e071c2dfbaa21e37d3174f04d58ea97 --v2 报错 [discovery] Failed to request cluster-info, will try again: G…

美团面试:微服务如何拆分?原则是什么?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如美团、字节、如阿里、滴滴、极兔、有赞、希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 微服务如何拆分&#xff1f; 微服务拆分的规范和原则…

LeetCode 热题100——栈与队列专题(三)

一、有效的括号 20.有效的括号&#xff08;题目链接&#xff09; 思路&#xff1a; 1&#xff09;括号的顺序匹配&#xff1a;用栈实现&#xff0c;遇到左括号入&#xff0c;遇到右括号出&#xff08;保证所出的左括号与右括号对应&#xff09;&#xff0c;否则顺序不匹配。 2…

【Web】Ctfshow XSS刷题记录

目录 反射型XSS ①web316 ②web317-319 ③web320-322 ④web323-326 存储型XSS ①web327 ②web328 ③web329 ④web330 ⑤web331 ⑥web332-333 反射型XSS ①web316 直接输入<script>alert(1)</script>,能弹窗。xss题目一般会有个bot&#xff0c;可以触…

QT 搭建opencv 环境

1. 准备工具CMake 一、CMake介绍 CMake是一个被广泛使用的、开源免费并且完全跨平台的构建工具&#xff0c;可以用简单的语句来描述所有平台的安装(编译过程)。它能够输出各种各样的makefile或者project文件&#xff0c;能测试编译器所支持的C特性&#xff0c;类似UNIX下的aut…

nodejs微信小程序 +python+PHP- 校园志愿者管理系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

SPSS快速聚类

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

华为ac+fit漫游配置案例

Ap漫游配置: 其它配置上面一样,ap管理dhcp和业务dhcp全在汇聚交换机 R1: interface GigabitEthernet0/0/0 ip address 11.1.1.1 255.255.255.0 ip route-static 12.2.2.0 255.255.255.0 11.1.1.2 ip route-static 192.168.0.0 255.255.0.0 11.1.1.2 lsw1: vlan batch 100 200…

【通俗易懂】git原理、安装及连接gitlab,github

目录 一、GIT原理【这部分也挺简单&#xff0c;可以看看&#xff0c;如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…

flutter创建不同样式的按钮,背景色,边框,圆角,圆形,大小都可以设置

在ui设计中&#xff0c;可能按钮会有不同的样式需要你来写出来&#xff0c;所以按钮的不同样式&#xff0c;应该是最基础的功能&#xff0c;在这里我们赶紧学起来吧&#xff0c;web端可能展示有问题&#xff0c;需要优化&#xff0c;但是基本样式还是出来了 我是将所有的按钮放…

【复盘】接口自动化测试框架建设的经验与教训!

为什么选择这个话题&#xff1f; 一是发现很多“点工”在转型迷茫期都会问一些自动化测试相关的问题&#xff0c;可以说自动化测试是“点工”升级的必经之路&#xff1b;二是Google一下接口自动化测试&#xff0c;你会发现很多自动化测试框架相关的文章&#xff0c;但是大部分…

小红书全自动加群引流脚本「 软件工具+引流技术教程」

软件介绍&#xff1a; 小红书群聊最新玩法&#xff0c;可自动检测群人数加群&#xff0c;不会加到垃圾群。定时发送广告&#xff0c;红书群聊的引流玩法回来了 功能一、自动搜索关键词加群&#xff0c;比如创业、项目、鞋子、包包、考公、考研… 功能二、自动检测群人数&…

宏集新闻 | 虹科传感器事业部正式更名为宏集科技

致一直支持“虹科传感器”的朋友们&#xff1a; 为进一步整合资源&#xff0c;给您带来更全面、更优质的服务&#xff0c;我们非常荣幸地宣布&#xff0c;虹科传感器事业部已正式更名为宏集科技。这一重要的改变代表了虹科持续发展进程中的新里程碑&#xff0c;也体现了我们在传…

vue中原生H5拖拽排序_拖拽图片也是同样的道理

原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】 H5有基于拖拽的事件机制&#xff0c;如果你还不熟悉&#xff0c;请看我之前的文章【拖拽上传】中有介绍。 原生拖拽API实现 由于比较简单直接上代码了&#xff1a; <!DOCTYPE html> <html lang"en&qu…

gwas数据获取如何获取完整的GWAS summary数据(1)------GWAS catalog数据库

IEU OpenGWAS project (mrcieu.ac.uk) UK Biobank - UK Biobank GWAS Catalog 在孟德尔随机化&#xff08;Mendelian randomization&#xff0c;MR&#xff09;研究中&#xff0c;对于暴露数据我们只需要那些显著的SNP信息&#xff0c;这样的信息在各种GWAS数据库中都是很容…

C++使用Tensorflow2.6训练好的模型进行预测

要在C语言中调用训练好的TensorFlow模型,需要使用TensorFlow C API。 https://tensorflow.google.cn/install/lang_c?hl=zh-cnten TensorFlow 提供了一个 C API,该 API 可用于为其他语言构建绑定。该 API 在 c_api.h 中定义,旨在实现简洁性和一致性,而不是便利性。 下载…

Jenkins 下载安装

下载 Jenkins 选择Download LTS是稳定版本,尽量选择稳定版本,然后选择你的开发系统. 安装 Jenkins需要JAVA环境&#xff0c;所以安装JAVA环境 Java Jenkins支持17、21等几个版本的Java&#xff0c;OpenJDK JDK 21.0.1 GA Release 安装不要安装到C盘,这个后面会占较大的…

体感互动游戏VR游戏AR体感游戏软件开发

随着科技的不断发展&#xff0c;体感互动游戏正逐渐成为游戏行业的一个重要趋势。这类游戏通过利用传感器、摄像头和运动控制器等技术&#xff0c;使玩家能够通过身体动作与游戏进行实时互动&#xff0c;极大地提升了娱乐体验。 1. 游戏设计与互动元素 体感互动游戏的核心在于…

HTML5生成二维码

H5生成二维码 前言二维码实现过程页面实现关键点全部源码 前言 本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库&#xff0c;实现一个输入URL按下回车后输出URL。文章底部有全部源码&#xff0c;需要可以自取。 实现效果图&#xff1a; 上述实现效果为&#…