element el-table合并单元格

news2025/1/26 15:08:36

合并

 表格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.coloradmin.cn/o/2281855.html

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

相关文章

【unity游戏开发之InputSystem——07】InputSystem+UGUI配合使用(基于unity6开发介绍)

文章目录 一、InputSystem+UGUI配合使用1、官方文档参考2、切换到新的输入模块二、UGUI中的新输入系统输入模块参数相关1、Send Pointer Hover To Parent2、Move Repeat Delay3、Move Repeat Rate4、XR Tracking Origin5、Deselect On Background CLick6、Pointer Behavior7、S…

web端ActiveMq测试工具

如何用vue3创建简单的web端ActiveMq测试工具&#xff1f; 1、复用vue3模板框架 创建main.js,引入APP文件&#xff0c;createApp创建文件&#xff0c;并加载element插件&#xff0c;然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…

2K高刷电竞显示器推荐

2K高刷电竞显示器推荐&#xff0c;各位喜欢打游戏&#xff0c;身为电竞迷的小伙伴&#xff0c;如果你想选一款2K高刷电竞显示器&#xff0c;那么下面的内容不容错过。 1.HKC G27H4Pro - 2K高刷电竞显示器推荐 外观 - HKC G27H4Pro 2K高刷电竞显示器 初见 HKC G27H4Pro&#x…

他把智能科技引入现代农业领域

江苏田倍丰农业科技有限公司&#xff08;以下简称“田倍丰”&#xff09;是一家专注于粮油种植的农业科技公司&#xff0c;为拥有300亩以上田地的大户提供全面的解决方案。田倍丰通过与当地政府合作&#xff0c;将土地承包给大户&#xff0c;并提供农资和技术&#xff0c;实现利…

第38周:猫狗识别 (Tensorflow实战第八周)

目录 前言 一、前期工作 1.1 设置GPU 1.2 导入数据 输出 二、数据预处理 2.1 加载数据 2.2 再次检查数据 2.3 配置数据集 2.4 可视化数据 三、构建VGG-16网络 3.1 VGG-16网络介绍 3.2 搭建VGG-16模型 四、编译 五、训练模型 六、模型评估 七、预测 总结 前言…

OpenCV2D 特征框架 (6)特征检测与描述类cv::KAZE的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::KAZE 类是 OpenCV 库中用于实现 KAZE 特征检测和描述的类。KAZE 是一种尺度不变特征变换&#xff08;Scale-Invariant Feature Transform, S…

Unity git版本管理

创建仓库的时候添加了Unity的.gitignore模版&#xff0c;在这个时候就能自动过滤不需要的文件 打开git bash之后&#xff0c;步骤git版本管理-CSDN博客 如果报错&#xff0c;尝试重新进git 第一次传会耗时较长&#xff0c;之后的更新就很快了

Neural networks 神经网络

发展时间线 基础概念 多层神经网络结构 神经网络中一个网络层的数学表达 TensorFlow实践 创建网络层 神经网络的创建、训练与推理 推理 推理可以理解为执行一次前向传播 前向传播 前向传播直观数学表达 前向传播直观数学表达的Python实现 前向传播向量化实现 相关数学知识…

2023年吉林省职业院校技能大赛网络系统管理样题

目录 任务清单 &#xff08;一&#xff09;基础配置 &#xff08;二&#xff09;有线网络配置 &#xff08;三&#xff09;无线网络配置 &#xff08;四&#xff09;出口网络配置 附录1&#xff1a;拓扑图​编辑 附录2&#xff1a;地址规划表 任务清单 &#xff08;一&a…

C++入门14——set与map的使用

在本专栏的往期文章中&#xff0c;我们已经学习了STL的部分容器&#xff0c;如vector、list、stack、queue等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层是线性序列的数据结构&#xff0c;里面存储的是元素本身。而本篇文章我们要来认识一下关联式容器。 &am…

996引擎 - 前期准备-配置开发环境

996引擎 - 前期准备 官网搭建服务端、客户端单机搭建 开发环境配置后端开发环境配置环境 前端开发环境配置环境 后端简介前端简介GUILayoutGUIExport 官网 996传奇引擎官网 所有资料从官网首页开始&#xff0c;多探索。 文档&#xff1a; 996M2-服务端Lua 996M2-客户端Lua 搭…

Java程序员如何设计一个高并发系统?

前言 无论是职场新人还是有一定工作经验的老手&#xff0c;系统设计问题都如同悬在头顶的达摩克利斯之剑。对于新人而言&#xff0c;面试时遭遇“如何从零开始设计一个完整系统”的问题&#xff0c;往往让人瞬间大脑一片空白。系统设计的范畴广泛&#xff0c;网络资源难以全面…

RV1126画面质量三:QP调节

一&#xff0e;什么是 QP 调节&#xff1f; QP 参数调节&#xff0c;指的是量化参数调节。它主要是来调节图像的细节&#xff0c;最终达到调节画面质量的作用。QP 值和比特率成反比&#xff0c;QP值越小画面质量越高&#xff1b;反之 QP 值越大&#xff0c;画面质量越低…

渐变颜色怎么调?

渐变颜色的调整是设计中非常重要的一部分&#xff0c;尤其是在创建具有视觉吸引力和深度感的设计作品时。以下是一些在不同设计软件中调整渐变颜色的详细步骤和技巧&#xff1a; 一、Adobe Photoshop 1. 创建渐变 打开渐变工具&#xff1a; 选择工具栏中的“渐变工具”&#x…

Arduino基础入门学习——OLED显示屏的基本使用

Arduino基础入门学习——OLED显示屏的基本使用 一、前言二、准备工作三、基本使用1. OLED显示基本字符 &#xff08;数字英文基本标点符号&#xff09;2. OLED显示汉字3. 显示图片 四、 结束语 一、前言 在我们的日常开发中&#xff0c;一般有这么几种方式对数据进行展示&#…

jQuery阶段总结(二维表+思维导图)

引言 经过23天的学习&#xff0c;期间有期末考试&#xff0c;有放假等插曲。本来应该在学校里学习&#xff0c;但是特殊原因&#xff0c;让回家了。但是在家学习的过程&#xff0c;虽然在学&#xff0c;很让我感觉到不一样。但是效果始终还是差点的&#xff0c;本来17、18号左右…

无公网IP 外网访问媒体服务器 Emby

Emby 是一款多媒体服务器软件&#xff0c;用户可以在 Emby 创建自己的个人多媒体娱乐中心&#xff0c;并且可以跨多个设备访问自己的媒体库。它允许用户管理传输自己的媒体内容&#xff0c;比如电影、电视节目、音乐和照片等。 本文将详细的介绍如何利用 Docker 在本地部署 Emb…

PAT甲级-1022 Digital Libiary

题目 题目大意 一个图书有图书id&#xff0c;书名&#xff0c;作者&#xff0c;关键字&#xff0c;出版商&#xff0c;出版时间6个信息。现要查询图书的ID&#xff0c;1对应通过书名查询&#xff0c;2对应作者&#xff0c;3对应关键字&#xff08;不需要完全一致&#xff0c;包…

OpenCV:在图像中添加高斯噪声、胡椒噪声

目录 在图像中添加高斯噪声 高斯噪声的特性 添加高斯噪声的实现 给图像添加胡椒噪声 实现胡椒噪声的步骤 相关阅读 OpenCV&#xff1a;图像处理中的低通滤波-CSDN博客 OpenCV&#xff1a;高通滤波之索贝尔、沙尔和拉普拉斯-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与…

二叉树的存储(下)c++

链式存储 我们可以创建两个数组L[N]、r[N]&#xff0c;分别存储i 号结点的左右孩子的编号&#xff0c;这样就可以通过数组下标实现链式访问。 本质上还是孩子表示法&#xff0c;存储的是左右孩子的信息 #include <iostream>using namespace std;const int N 1e6 10; …