【前端】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,一经查实,立即删除!

相关文章

mysql8.0英文OCP考试第61-70题

Q61.You wish to protect your MySQL database against SQL injection attacks. Which method would fail to do this? A)using stored procedures for any database access B)using PREPARED STATEMENTS C)installing and configuring the Connection Control plugin ( …

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

项目场景&#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; 微服务拆分的规范和原则…

力扣labuladong一刷day14天翻转单链表共2题

力扣labuladong一刷day14天翻转单链表共2题 文章目录 力扣labuladong一刷day14天翻转单链表共2题一、06. 反转链表二、92. 反转链表 II 一、06. 反转链表 题目链接&#xff1a;https://leetcode.cn/problems/reverse-linked-list/ 思路&#xff1a; 迭代法&#xff1a;新new一…

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数据库中都是很容…

vue2的响应式数据变化

一、Vue2是如何实现数据响应式的 Vue实现响应式变化的方式是通过数据劫持和发布-订阅模式。 数据劫持&#xff1a;Vue通过使用Object.defineProperty()方法对数据对象的属性进行劫持&#xff0c;使其能够在属性值发生变化时触发相应的操作。 发布-订阅模式&#xff1a;Vue使用…

JS服务端技术—Node.js知识点锦集

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/134544523 出自【进步*于辰的博客】 接触Node.js挺长时间了&#xff0c;工作也经常使用&#xf…