element 表格第一列合并,第二列展开后出现错位情况

展开后发现蓝色一行挤下来,而且还错位了

解决思路:展开行,在dom上其实是新增了一行的高度,合并上新增一个高度就可以

<el-table
  v-loading="tabLoading"
  fit
  ref="oneRef"
  height="100%"
  :span-method="objectSpanMethod"
  @expand-change="expandHeight"
  highlight-current-row
>

async expandHeight(row: any, expanded: any) {
    this.$nextTick(() => {
      this.spanObj = dataMethod(this.data, ['factoryDivText']);
      const A10 = expanded.filter((k: any) => {
        return 'A10' == k.factoryDiv;
      });
      if (A10.length > 0) {
        this.spanObj.factoryDivText[0] = this.spanObj.factoryDivText[0] + A10.length;
      }

      const A20 = expanded.filter((k: any) => {
        return 'A20' == k.factoryDiv;
      });
      if (A20.length > 0) {
        let A20Index = 0;
        this.spanObj.factoryDivText.map((v: any, index: any) => {
          if (A10.length == 0) {
            this.spanObj.factoryDivText[0] = this.spanObj.factoryDivText[0] + A20.length;
          } else {
            if (index != 0 && v != 0) A20Index = index;
          }
        });
        this.spanObj.factoryDivText[A20Index] = this.spanObj.factoryDivText[0] + A20.length;
      }
      (this.$refs.oneRef as any).doLayout();
    });
  }



export const dataMethod = (data: any[], isH: string[]) => {
  const spanObj: any = {};
  const pos: any = {};
  let lastItem: any = null; // 上一个数据项
  data.map((it, i) => {
    Object.keys(it).map(key => {
      if (i === 0) {
        spanObj[key] = [1];
        pos[key] = i;
      } else {
        if (isH.includes(key) && lastItem && isEqual(lastItem, it, isH)) {
          spanObj[key][pos[key]] += 1;
          spanObj[key].push(0);
        } else {
          spanObj[key].push(1);
          pos[key] = i;
        }
      }
    });
    lastItem = it;
  });

  return spanObj;
};


objectSpanMethod({ column, rowIndex }: any) {
    const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1;
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }

获取点击后合并的长度+合并的数字

最终结果展开后正常展示了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JAVA开发 使用Apache PDFBox库生成PDF文件,绘制表格

1. 表格位置定点 2.执行效果展示&#xff08;截取PDF文件图片&#xff09; 3.执行代码 当我们使用Apache PDFBox库在PDF文件中创建带有表格的内容&#xff0c;需要遵循几个步骤。PDFBox本身并没有直接的API来创建表格&#xff0c;但我们可以通过定位文本、绘制线条和单元格矩形…

准橙人工翻译微信小程序,100+专业领域的译者在线帮你翻译!藏语、维吾尔语、哈萨克语、壮语、彝文、蒙古语统统支持人工翻译!

亲爱的朋友们&#xff0c;我们深知每一种语言都承载着独特的文化和历史&#xff0c;为了传承和弘扬这些宝贵的文化遗产&#xff0c;我们诚挚地邀请具备翻译经验并熟练掌握以下任意一门语言的您加入我们的团队&#xff01; 中国少数民族语言&#xff1a;藏语、维吾尔语、哈萨克…

DHCP原理与配置(Linux)

目录 DHCP概念 使用DHCP的好处 DHCP的分配方式 DHCP租约过程 租约过程分4个步骤&#xff08;全过程广播&#xff09; 1. 客户机请求IP&#xff08;Discover&#xff1a;发现&#xff1b;客户端广播 发送一个数据包&#xff0c;其他主机也能接收到&#xff0c;如果是没有安…

StarRocks vs. Trino: 高并发性能背后的技术优势是什么?

Trino&#xff08;之前称 PrestoSQL&#xff09;项目最初由 Meta 开发&#xff0c;旨在让数据分析师能够在广泛的 Apache Hadoop 数据仓库上执行交互式查询。其高效处理大型数据集和复杂查询的能力&#xff0c;以及多数据源连接的灵活性&#xff0c;使其迅速成为大规模组织的首…

bugku题目(带WP)

CTF题型&#xff0c;带WP。根据给出的题目&#xff0c;找到flag。 1、眼见非实 下载实验文件是一个file .zip 解压这个file.zip压缩包&#xff0c;得到眼见为实.docx文件 双击打开这个文件&#xff0c;不能读取。 修改眼见为实.docx的后缀为眼见为实.zip&#xff0c;再进行解压…

蚁群算法的优化计算——旅行商问题(TSP)优化matlab

微♥关注“电击小子程高兴的MATLAB小屋”获得资料 一&#xff0c;理论基础 生物学家研究发现&#xff0c;蚂蚁在寻找食物时&#xff0c;会在其经过的路径上释放一种信息素&#xff0c;并能够感知其他蚂蚁释放的信息素。信息素浓度的大小表示路径的远近&#xff0c;浓度越高&a…

拼房、行程变更、跨月退改?复杂场景对账结算怎么办?

在实际商业场景中&#xff0c;销售渠道多样化、数据关联多方、场景多元化、业务逻辑多变性等都让对账成为一门“技术活”&#xff0c;也成为财务人员面前的“拦路虎”。尤其当面临多成本中心、跨项目和跨月退改的出差费用时。手动拆分费用、协调沟通、以及处理费用归属等问题&a…

多视图变换矩阵与SLAM位姿估计中的地图点投影的几何约束

定义 Homography & projective transform M ( 3 4 ) [ f s x c ′ 0 a f y c ′ 0 0 1 ] [ 1 0 0 0 0 1 0 0 0 0 1 0 ] [ R 3 3 0 3 1 0 1 3 1 ] [ I 3 3 T 3 1 0 1 3 1 ] \underset{(3 \times 4)}{\mathbf{M}}\left[\begin{array}{ccc} f & s & x_c^{\pr…

Servlet基础(续集2)

HttpServletResponse web服务器接收到客户端的http的请求&#xff0c;针对这个请求&#xff0c;分别创建一个代表请求的HttpServletRequest对象&#xff0c;代表响应的一个HttpServletResponse 如果要获取客户端请求过来的参数&#xff1a;找HttpServletRequest如果要给客户端…

MySQL之高级特性(一)

高级特性 外键约束 InnoDB是目前MySQL中唯一支持外键的内置存储引擎&#xff0c;所以如果需要外键支持那选择就不多了。使用外键是有成本的。比如外键通常都要求每次在修改数据时都要在另一张表中多执行一次查找操作。虽然InnoDB强制外键使用索引&#xff0c;但还是无法消除这…

UML精简概述

UML精简概述 UML精简概述 UML精简概述UML的定义常见的关系 在学习设计模式之前&#xff0c;需要掌握一些预备知识&#xff0c;主要包括UML类图和面向对象设计原则&#xff0c;它们是“基础内功”&#xff0c;将为后续的“深入修行”奠定基础。UML类图可用于描述每一个设计模式的…

视频点播系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;客服聊天管理&#xff0c;基础数据管理&#xff0c;论坛管理&#xff0c;公告管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#xff0c;视…

在群晖上通过Docker部署DB-GPT

最近一直有网友在后台私信&#xff0c;发的内容高度统一&#xff0c;只有后面 8 位数字不一样&#xff0c;都是 &#xff03;22232 xxxxxxxx&#xff0c;有谁知道是什么意思吗&#xff1f;在我印象中&#xff0c;这是第二次这么大规模的发类似的字符串了 什么是 DB-GPT ? DB-G…

C++入门 string常用接口(下)

目录 string类的常用接口说明 string类对象的修改操作&#xff08;修饰符&#xff09; operator & append & push_back assign & insert erase & replace swap & pop_back string类对象的非成员函数 operator relational operators&#xff08;关系…

如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?

前言 昨天分享了在 .NET Core Console 项目中应用 NLog 写日志的详细例子&#xff0c;有几位小伙伴私信说 ASP.NET Core Web Api 项目中无法使用&#xff0c;其实在 ASP.NET Core Web Api 项目中应用 NLog 写日志&#xff0c;跟 .NET Core Console 项目是有些不一样的&#xf…

TLS指纹跟踪网络安全实践(C/C++代码实现)

TLS指纹识别是网络安全领域的重要技术&#xff0c;它涉及通过分析TLS握手过程中的信息来识别和验证通信实体的技术手段。TLS&#xff08;传输层安全&#xff09;协议是用于保护网络数据传输的一种加密协议&#xff0c;而TLS指纹则是该协议在实际应用中产生的独特标识&#xff0…

1.0 Android中Activity的基础知识

一&#xff1a;Activity的定义 Activity是一个应用组件&#xff0c;它提供了一个用户界面&#xff0c;允许用户执行一个单一的、明确的操作&#xff0c;用户看的见的操作都是在activity中执行的。Activity的实现需要在manifest中进行定义&#xff0c;不让会造成程序报错。 1.…

第一百零四节 Java面向对象设计 - Java内部类成员

Java面向对象设计 - Java内部类成员 内部类可以访问其所有实例成员&#xff0c;实例字段和其封闭类的实例方法。 class Outer {private int value 2014;public class Inner {public void printValue() {System.out.println("Inner: Value " value);}} // Inner …

SAP PP学习笔记17 - MTS(Make-to-Stock) 按库存生产 的策略70,策略59

上几章讲了几种策略&#xff0c;策略10&#xff0c;11&#xff0c;30&#xff0c;40。 SAP PP学习笔记14 - MTS&#xff08;Make-to-Stock) 按库存生产&#xff08;策略10&#xff09;&#xff0c;以及生产计划的概要-CSDN博客 SAP PP学习笔记15 - MTS&#xff08;Make-to-St…

linux用户态操作GPIO首先需要export导出

在使用系统调用来实现 GPIO&#xff08;通用输入输出端口&#xff09;的输入输出操作时&#xff0c;同样需要先通过 export 属性文件来导出 GPIO&#xff0c;这是因为 Linux 内核对 GPIO 的管理和访问机制决定了这一点。 以下是具体原因&#xff1a; 内核设备模型&#xff1a…