element el-table合并单元格

合并

 表格el-table添加方法:span-method="”

 <el-table v-loading="listLoading" :data="SHlist" ref="tableList" element-loading-text="Loading" border fit   highlight-current-row :header-cell-style="headClass" style="margin-top:15px" :span-method="objectSpanMethod">

 下面是我需求,合并第二列,第五

 //合并单元格objectSpanMethod({row,column,rowIndex,columnIndex,index2}) {if (columnIndex === 4) { //下标是4的那一列const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;console.log(_col, '_col');return {rowspan: _row, //行colspan: _col //列};}if (columnIndex === 1) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;console.log(_col, '_col');return {rowspan: _row, //行colspan: _col //列};}},

添加方法 

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

下面是使用,获取倒接口数据后进行数据整合

  this.getSpanArr(this.SHlist);this.getSpanArr2(this.SHlist);

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

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

相关文章

qml OpacityMask详解

1、概述 OpacityMask是QML&#xff08;Qt Meta-Object Language&#xff09;中的一种图形效果&#xff0c;它使用另一个项目&#xff08;通常是一个图像或图形项&#xff09;作为遮罩来控制源项目的透明度。这种效果允许开发者通过遮罩的alpha通道来精确地控制源项目中哪些部分…

RabbitMQ1-消息队列

目录 MQ的相关概念 什么是MQ 为什么要用MQ MQ的分类 MQ的选择 RabbitMQ RabbitMQ的概念 四大核心概念 RabbitMQ的核心部分 各个名词介绍 MQ的相关概念 什么是MQ MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&am…

渗透测试之SSRF漏洞原理 危害 产生的原因 探测手法 防御手法 绕过手法 限制的手段

目录 SSRF说明: SSRF攻击流程 原理&#xff1a; 危害: SSRF产生的原因 ssrf漏洞利用{危害} 探测手法是否存在SSRF漏洞 如何找ssrf漏洞位置 分享连接地址 google hack url关键字 PHP语言中可能出现的ssrf漏洞函数 file_get_contents sockopen() curl_exec() SSRF…

centos9编译安装opensips 二【进阶篇-定制目录+模块】推荐

环境&#xff1a;centos9 last opensips -V version: opensips 3.6.0-dev (x86_64/linux) flags: STATS: On, DISABLE_NAGLE, USE_MCAST, SHM_MMAP, PKG_MALLOC, Q_MALLOC, F_MALLOC, HP_MALLOC, DBG_MALLOC, CC_O0, FAST_LOCK-ADAPTIVE_WAIT ADAPTIVE_WAIT_LOOPS1024, MAX_RE…

【前端】CSS学习笔记(1)

目录 CSS的简介CSS的概念语法 CSS的引入方式内联样式&#xff08;行内样式&#xff09;内部样式外部样式&#xff08;推荐&#xff09; 选择器全局选择器元素选择器类选择器ID选择器合并选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器伪类选择器:link:visited:hover:ac…

Java面试专题——面向对象

面向过程和面向对象的区别 面向过程&#xff1a;当事件比较简单的时候&#xff0c;利用面向过程&#xff0c;注重的是事件的具体的步骤/过程&#xff0c;注重的是过程中的具体的行为&#xff0c;以函数为最小单位&#xff0c;考虑怎么做。 面向对象&#xff1a;注重找“参与者…

电阻电位器可调电阻信号隔离变送器典型应用

电阻电位器可调电阻信号隔离变送器典型应用 产品描述&#xff1a; 深圳鑫永硕科技的XYS-5587系列是一进一出线性电子尺(电阻/电位计信号及位移)信号隔离变送器&#xff0c;是将输入电阻,线性电子尺,角度位移传感器信号进行采集,隔离,放大并转换成模拟量信号的小型仪表设备,并以…

Alluxio 联手 Solidigm 推出针对 AI 工作负载的高级缓存解决方案

作者&#xff1a;Wayne Gao, Yi Wang, Jie Chen, Sarika Mehta Alluxio 作为全球领先的 AI 缓存解决方案供应商&#xff0c; 提供针对 GPU 驱动 AI 负载的高速缓存。其可扩展架构支持数万个节点&#xff0c;能显著降低存储带宽的消耗。Alluxio 在解决 AI 存储挑战方面的前沿技…

文件系统格式RAW数据恢复全攻略

一、RAW文件系统格式深度解析 在数据存储的世界里&#xff0c;文件系统扮演着至关重要的角色&#xff0c;它负责管理和组织硬盘、U盘、SD卡等存储设备上的数据。而RAW文件系统格式&#xff0c;作为一种特殊状态&#xff0c;常常让许多用户感到困惑与不安。RAW格式并非一种标准…

探索 Stable-Diffusion-Webui-Forge:更快的AI图像生成体验

目录 简介&#x1f31f; 主要特点&#x1f4e5; 安装步骤1. 下载2. 配置环境和安装依赖3. 模型目录说明 &#x1f680; 运行 Stable-Diffusion-Webui-Forge1. 进入项目目录2. 运行项目3. 打开页面 &#x1f3a8; 使用体验常见问题&#x1f4dd; 小结 简介 Stable-Diffusion-We…

汇编与逆向(一)-汇编工具简介

RadASM是一款著名的WIN32汇编编辑器&#xff0c;支持MASM、TASM等多种汇编编译器&#xff0c;Windows界面&#xff0c;支持语法高亮&#xff0c;自带一个资源编辑器和一个调试器。 一、汇编IDE工具&#xff1a;RadASM RadASM有内置的语言包 下载地址&#xff1a;RadASM asse…

Yearning开源MySQL SQL审核平台

一款MYSQL SQL语句/查询审计工具&#xff0c;为DBA与开发人员使用. 本地部署&#xff0c;注重隐私&#xff0c;简单高效的MYSQL审计平台。 它可以通过流程审批&#xff0c;实现真实线上环境sql的审核和执行&#xff0c;还可以回滚执行&#xff0c;能够确保线上SQL更新的可靠性…

PyTorch使用教程(10)-torchinfo.summary网络结构可视化详细说明

1、基本介绍 torchinfo是一个为PyTorch用户量身定做的开源工具&#xff0c;其核心功能之一是summary函数。这个函数旨在简化模型的开发与调试流程&#xff0c;让模型架构一目了然。通过torchinfo的summary函数&#xff0c;用户可以快速获取模型的详细结构和统计信息&#xff0…

【2024 博客之星评选】请继续保持Passion

我尝试复盘自己2024年走的路&#xff0c;希望能给诸君一些借鉴。 文章目录 回头望感想与收获成长与教训今年计划感恩一些体己话 回头望 回望我的2024年&#xff0c;年初拿高绩效&#xff0c;但感觉逐渐被公司一点点剥离出中心&#xff1b;年中一直在学习防患于未然&#xff1b…

C++ 类- 构造和析构

空类 class A {};空类大小&#xff1a; sizeof(A) 1编译器会默认生成 6 个成员函数&#xff1a; class A { public:A();//构造函数 - 完成对象初始化工作~A();//析构函数 - 完成对象的资源清理A(const A& a);//拷贝构造函数 - 使用同一类中之前创建的对象来初始化新创建…

集群、分布式及微服务间的区别与联系

目录 单体架构介绍集群和分布式架构集群和分布式集群和分布式区别和联系 微服务架构的引入微服务带来的挑战 总结 单体架构介绍 早期很多创业公司或者传统企业会把业务的所有功能实现都打包在一个项目中&#xff0c;这种方式就称为单体架构 以我们都很熟悉的电商系统为例&…

从Windows通过XRDP远程访问和控制银河麒麟ukey v10服务器,以及多次连接后黑屏的问题

从Windows通过XRDP远程访问和控制银河麒麟ukey v10服务器&#xff0c;以及多次连接后黑屏的问题。 安装 rdp 服务&#xff1a; yum install -y epel-release yum install -y xrdp或者如下&#xff1a; 可以通过下载rpm软件包&#xff0c;然后rpm方式安装。访问xrdp官网https…

Maven多环境打包方法配置

简单记录一下SpringBoot多环境打包配置方法&#xff0c;分部署环境和是否包含lib依赖包两个维度 目录 一、需求说明二、目录结构三、配置方案四、验证示例 一、需求说明 基于Spring Boot框架的项目分开发&#xff0c;测试&#xff0c;生产等编译部署环境&#xff08;每一个环境…

SpringMVC 实战指南:打造高效 Web 应用的秘籍

第一章&#xff1a;三层架构和MVC 三层架构&#xff1a; 开发服务器端&#xff0c;一般基于两种形式&#xff0c;一种 C/S 架构程序&#xff0c;一种 B/S 架构程序使用 Java 语言基本上都是开发 B/S 架构的程序&#xff0c;B/S 架构又分成了三层架构三层架构&#xff1a; 表现…

github汉化

本文主要讲述了github如何汉化的方法。 目录 问题描述汉化步骤1.打开github&#xff0c;搜索github-chinese2.打开项目&#xff0c;打开README.md3.下载安装脚本管理器3.1 在README.md中往下滑动&#xff0c;找到浏览器与脚本管理器3.2 选择浏览器对应的脚本管理器3.2.1 点击去…