Vue el-table列合并

news2024/9/22 7:14:48

 1.封装公用方法

const dataMethod = (data, isH = []) => {
    let spanObj = {}; // 存储每个key 对应的合并值
    let pos = {}; // 存储的是 key合并值得索引

    // 循环数据
    for (let i = 0; i < data.length; i++) {
        let dataI = data[i];

        // 循环数据内对象,查看有多少key
        for (let j in dataI) {
            // 如果只有一条数据时默认为1即可,无需合并
            if (i === 0) {
                spanObj[j] = [1];
                pos[j] = 0;
            } else {
                let e = dataI;
                let k = data[i - 1];

                // 判断上一级别是否存在,存在当前的key与上级别的key是否一样
                // 以及是否有数组规定只允许合并某些列的单元格
                // 新增额外的条件: 当前列和前一列的值不相同
                if (k && e[j] === k[j] && (!isH.length || isH.includes(j))
                    && e[isH[isH.indexOf(j) - 1]] === k[isH[isH.indexOf(j) - 1]]) {
                    // 如果上一行和当前行相等,并且指定合并的列满足条件,数组就加1 数组后面就添加一个0
                    spanObj[j][pos[j]] += 1;
                    spanObj[j].push(0);
                } else {
                    spanObj[j].push(1);
                    pos[j] = i;
                }
            }
        }
    }
    return spanObj;
};

export { dataMethod };

2.方法调用

<el-table v-loading="loading" 
   :data="ParamsList" border 
   :default-selection="ParamsList[0]"
   :header-cell-style="{ background: '#eef1f6', color: '#606266', height: '16px', textAlign: 'center', }"
   @current-change="handleSelection" 
   highlight-current-row 
   :span-method="arraySpanMethod">
</el-table>
//获取数据后指定需要合并的列通过方法计算合并的结果
this.spanTable = dataMethod(this.ParamsList, ["A", "B"])

//通过element el-table的事件调用合并方法
 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            let _row = this.spanTable[column.property] ? this.spanTable[column.property][rowIndex] : 1;
            let _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        },

结果

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

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

相关文章

使用U盘重装系统

目录 一、 制作启动盘 1. 准备一个U盘和一台电脑 2. 下载win10安装包 二、安装操作系统 1. 插入系统安装盘 2. 通过进入BIOS界面进入到我们自己制作的启动盘上 三、安装成功后进行常规设置 一、 制作启动盘 1. 准备一个U盘和一台电脑 注意&#xff1a;提前备份好U盘内的…

九浅一深Jemalloc5.3.0 -- ⑧浅*free

目前市面上有不少分析Jemalloc老版本的博文&#xff0c;但最新版本5.3.0却少之又少。而且5.3.0的架构与5之前的版本有较大不同&#xff0c;本着“与时俱进”、“由浅入深”的宗旨&#xff0c;我将逐步分析最新release版本Jemalloc5.3.0的实现。 另外&#xff0c;单讲实现代码是…

PyTorch环境配置及安装

PyTorch环境配置及安装 Step1&#xff1a;安装Anaconda 参考该链接&#xff08;视频01:30--03:00为安装教程&#xff09;&#xff1a; 【PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】】 https://www.bilibili.com/video/BV1hE41…

04通俗理解自注意力机制(self-attention)

04浅谈自注意力机制&#xff08;self-attention&#xff09; 1. 基本概念 注意力机制 是Transformer模型的核心。它的作用是让模型能够“关注”输入数据的不同部分&#xff0c;而不是一次只处理一个词。比如&#xff0c;当模型在处理一句话时&#xff0c;它可以同时考虑句子中…

AntV学习笔记

文章目录 G6 图可视化引擎简单上手复杂一点的案例 S2 多维交叉分析表格简单的一个vue3使用S2的例子 G6 图可视化引擎 G6 是一个简单、易用、完备的图可视化引擎&#xff0c;它在高定制能力的基础上&#xff0c;提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者…

【数据集】最近开源的一些多模态图表理解数据集

1. CharXiv 现有数据集通常关注过于简化和同质化的图表&#xff0c;并且问题往往基于模板生成&#xff0c;这导致了对MLLMs图表理解能力的过度乐观评估。为了解决这个问题&#xff0c;作者提出了一个新的评估套件CharXiv&#xff0c;它包含了从arXiv论文中精选的2323个自然、具…

昇思25天学习打卡营第10天|linchenfengxue

基于MobileNetv2的垃圾分类 通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。 MobileNetv2模型原理介绍 MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络&#x…

【产品运营】Saas的核心六大数据

国内头部软件公司的一季度表现惨不忍睹&#xff0c;为啥美国的还那么赚钱呢&#xff1f;其实核心是&#xff0c;没几个Saas产品经理是看数据的&#xff0c;也不知道看啥数据。 SaaS 行业&#xff0c;天天抛头露面、名头叫的响的 SaaS 产品&#xff0c;真没有几个赚钱的。 那为…

# mysql 中文乱码问题分析

mysql 中文乱码问题分析 一、问题分析&#xff1a; MySQL 中文乱码通常是因为字符集设置不正确导致的。MySQL 有多种字符集&#xff0c;如 latin1、utf8、utf8mb4 等&#xff0c;如果在创建数据库、数据表或者字段时没有指定正确的字符集&#xff0c;或者在插入数据时使用了与…

Excel中按列的首行字母顺序,重新排列(VBA脚本)

排序前 要求对4列数据按照第一行abcd的顺序排列 VB脚本如下&#xff1a; 要使用这个脚本&#xff0c;请按照以下步骤操作&#xff1a; 打开Excel&#xff0c;然后按下 Alt F11 打开VBA编辑器。在VBA编辑器中&#xff0c;选择“插入” > “模块”&#xff0c;在打开的模块…

C语言课设--读取文件并统计数据

读取文件并统计数据 // 统计记事本英文字符数 //功能 &#xff1a; 读 文件 a.txt 统计出各种 数字 大写字母 小写字母 0~9 A~Z a ~z各有多少个 程序主体框架如下&#xff1a; #include<stdio.h> int a[128]{0};//其中数组元素a[i]保存 ASCII 码为i的字符的数量 v…

安装Intel Realsense D435i驱动与ROS包报错

1.下载安装realsense SDK 1.1 安装依赖 sudo apt install libudev-dev pkg-config libgtk-3-dev sudo apt install libusb-1.0-0-dev pkg-config sudo apt install libglfw3-dev sudo apt install libssl-dev1.2 权限 cd librealsense/ sudo cp config/99-realsense-libusb.…

7 动态规划

下面的例子不错&#xff1a; 对于动态规划&#xff0c;能学到不少东西&#xff1b; 你要清楚每一步都在做什么&#xff0c;划分细致就能够拆解清楚&#xff01; xk​​​​​​​. - 力扣&#xff08;LeetCode&#xff09; labuladong的算法笔记-动态规划-CSDN博客 动态规划是…

VulnHub靶场之DarkHole_1

1 信息收集 1.1 主机发现 arp-scan -l 主机IP地址为&#xff1a;192.168.1.17 1.2 端口和服务扫描 nmap -sS -sV -A -T5 -p- 192.168.1.17 开放22&#xff0c;80端口 1.3 目录扫描 dirsearch -u 192.168.1.17 2 渗透 2.1 访问端口 2.2 注册账号 暴力破解不现实&#…

大语言模型在时空分析中的能力评估

这篇论文的标题是《STBench: Assessing the Ability of Large Language Models in Spatio-Temporal Analysis》&#xff0c;由Wenbin Li等人撰写。本文提出了一个名为STBench的基准&#xff0c;用于评估大型语言模型&#xff08;LLMs&#xff09;在时空分析中的能力。以下是对论…

ESP32CAM物联网教学04

ESP32CAM物联网教学04 给小车配个显示屏 小智决定给小车增加一块显示屏&#xff0c;让小车看起来更好看一些。 点灯物联控制小车的行驶方向 淘宝上面可以使用的液晶显示屏种类非常多&#xff0c;&#xff08;输入OLED搜索&#xff09;经过挑选&#xff0c;选中了这一块&#…

FlinkSQL 开发经验分享

作者&#xff1a;汤包 最近做了几个实时数据开发需求&#xff0c;也不可避免地在使用 Flink 的过程中遇到了一些问题&#xff0c;比如数据倾斜导致的反压、interval join、开窗导致的水位线失效等问题&#xff0c;通过思考并解决这些问题&#xff0c;加深了我对 Flink 原理与机…

学习笔记——动态路由——OSPF(邻接/邻居)

十、OSPF的邻接/邻居 1、OSPF路由器之间的关系 (1)基本介绍 在OSPF网络中&#xff0c;为了交换链路状态信息和路由信息&#xff0c;邻居设备之间首先要建立邻接关系&#xff0c;邻居(Neighbors)关系和邻接(Adjacencies)关系是两个不同的概念。 OSPF路由器的两种关系&#x…

《操作系统真象还原》学习笔记:第1章 部署工作环境

**提示&#xff1a;**这篇文章是根据学长提供的教程《操作系统真象还原》第一章 部署工作环境来完成的&#xff0c;我按照学长给的教程一步一步做下来&#xff0c;再结合《操作系统真象还原》这本书&#xff0c;对实验环境进行了配置。以下是我按照教程进行搭建的记录&#xff…

【RocketMQ】记录一次RocketMQ消费延迟问题排查思路

文章目录 背景问题排查Consumer负载均衡机制订阅关系的一致 背景 业务团队反馈使用我提供的RocketMQ集群&#xff0c;上游生产的消息&#xff0c;部分消息&#xff0c;消费程序需要等1分钟&#xff0c;甚至几分钟后&#xff0c;才能收到。 问题排查 见怪不怪&#xff0c;大部…