Vxe Table/Grid 单元格分组合并

2023-10-27

要合并的列

['htbm','htmc','hetd','hetdws','yjs']

 一般的合并,不带逻辑,直接就把各自列对应的相同名字的列合并了,如下所示,不是合同的数据,值一样,直接给合并了

 加上逻辑区分后的合并,会依次判断前面的字段一致后才合并后面的字段,效果图如下:

 

实现思路:

1、配置要合并的字段

:mergeFields="['htbm','htmc','hetd','hetdws','yjs']"

2、实现vxe table或者grid的合并方法

:span-method="mergeRowMethod"

3、具体mergeRowMethod的实现方法如下

// 通用行合并函数(将相同多列数据合并为一行)
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = this.mergeFields;
      if (fields.length == 0) {
        return;
      }
      const cellValue = row[column.property];
      if (
        cellValue != undefined &&
        cellValue != null &&
        fields.includes(column.property)
      ) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        //if (prevRow && prevRow[column.property] === cellValue) {
        if (prevRow && this.checkMergeFields(row, prevRow, column.property)) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          //while (nextRow && nextRow[column.property] === cellValue) {
          while (nextRow && this.checkMergeFields(row, nextRow, column.property)) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    //循环判断前面的列,如果值不一样的话就不合并
    checkMergeFields(row, nextRow, property) {
      var ret = true;
      for (var i = 0; i < this.mergeFields.length; i++) {
        var field = this.mergeFields[i];
        if (nextRow[field] != row[field]) {
          ret = false;
          break;
        }
        if (field == property) {
          break;
        }
      }

      return ret;
    },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vxe Table/Grid 单元格分组合并 的相关文章

随机推荐

  • JMeter压力测试实例操作

    1 脚本录制 脚本录制 JMeter启用WEB代理 浏览器把代理上网设置为JMeter所在的IP地址 自己电脑就是127 0 0 1代理端口默认8080 至于浏览器修改代理上网服务器 不做截图 Jmeter 运行在目录 apache jme
  • Qt 的几个常用部件 -- QFrame

    文章目录 基本信息 公共类型 可用来设置的 详细描述 可以处理的事件 基本信息 头文件 include
  • 微信小程序——订阅消息与微信公众号模板消息

    订阅消息 一次性订阅消息 某个按钮 并且只能是用户自己就手动点击的 操作调起来这个允许授权弹窗 允许通知之后也只能发送一次消息 即便点上 总是保持一上选择 不再询问 也只是在下次点击同一个按钮时默认允许发送消息 不是可以一直发送消息的 使用
  • python文件处理方式

    python文件处理方式 file open D pythonText txt r encoding UTF 8 print file lt io TextIOWrapper name D pythonText txt mode r enc
  • IntelliJ IDEA (Ultimate Edition)2021.1配置javaFX8(Mac Pro) 踩坑

    该文写于2022 1 22日 应该算是比较新的坑吧 仅供参考 转发请注明出处 该版本内置了javaFX模块 创建项目可以在左侧工具栏看到JavaFX选项 创建项目后 intelliJ自动创建的项目结构如下图 打开Main文件 发现一大堆红色
  • iOS: HTTPS 与自签名证书

    不是每个公司都会以数百美金一年的代价向CA购买SSL证书 在企业应用中 付费的SSL证书经常被自签名证书所替代 当然 对于自签名证书iOS是没有能力验证的 Safari遇到这种无法验证的自签名证书的唯一处理方法 就是将问题扔给用户 让用户决
  • zSetOperations=redisTemplate.opsForZSet();redis的Zset数据类型方法大全(zSetOperations常用方法详细)

    zSetOperations redisTemplate opsForZSet 以下是 zSetOperations 接口中定义的所有方法及其详细说明 void add K key V value double score 将一个成员添加到
  • JDBC(The end)—— 数据库连接池示例 (与线程池梦幻联动)

    写在之前 不管以后对于那种类型的池 都需要List接口利用多态的写法来对一系列集合框架类进行实例化对象 以此该对象调用add方法 来装多个此种类型的实例化对象 数据库连接池的设计思路比线程池简单易懂 以下是示例 和之前线程池的设计思想相同之
  • python怎么搭建免费代理IP池

    搭建免费代理 IP 池需要经过以下步骤 1 抓取免费代理 IP 可以通过爬虫抓取免费的代理 IP 例如可以使用 requests 和 BeautifulSoup 库实现 需要注意的是 免费代理 IP 的可用性通常比较低 需要考虑测试代理 I
  • 计算机网络学习笔记--基带(base)信号

    基带 base 保持数据波的原样进行传输称为基带传输或者基带数字信号传输 宽带 broad 在数据通信领域则指数据传输速率超过1Mps的传输系统 宽带信号则是将基带信号进行调制后形成的频分复用模拟信号 基带信号进行调制后 其频谱搬移到较高的
  • Linux更改SSH端口,并解决SSHD服务重启失败的问题

    环境 Linux Centos 7 1 进入sshd配置文件 vi etc ssh sshd config 2 找到 Port 22 这行 删掉注释符 将端口改为 想要变成的端口号 如 2022 3 重启sshd服务 systemctl r
  • 微信小程序后台销毁时间 演变和总结(热启动时间限制)

    小程序启动 这样 小程序启动可以分为两种情况 一种是冷启动 一种是热启动 冷启动 如果用户首次打开 或小程序销毁后被用户再次打开 此时小程序需要重新加载启动 即冷启动 热启动 如果用户已经打开过某小程序 然后在一定时间内再次打开该小程序 此
  • Java实现微信登录

    Java实现微信登录 代码实现微信授权 简单来说 微信授权分为四步 1 授权登录接口 生成一个二维码在页面中 2 用户点击授权成功后自动获取code 3 浏览器自动利用code访问回调接口 4 在回调接口中利用code登录 appId ap
  • Android嵌入式系统程序开发

    Android嵌入式系统程序开发 基本信息 作者 胡文 宁世勇 李明俊 金雪松 丛书名 单片机与嵌入式丛书 出版社 机械工业出版社 ISBN 9787111411697 上架时间 2013 4 2 出版日期 2013 年4月 开本 16开
  • oracle rac io,ORACLE RAC 之I/O分离--hangcheck-timer模块配置

    ORACLE RAC 之I O分离 hangcheck timer模块配置 此文档摘自METALINK 726833 1 所适用的ORACLE版本为 Oracle Server Enterprise Edition Version 9 2
  • git:文件存储方式

    引言 我们知道 git 跟踪文件会经历三个阶段 工作区 暂存区和本地仓库 参考git 理解工作区 暂存区和本地仓库 在这些阶段文件如何被储存 理解 git 文件的存储方式能帮助我们掌握 git 的工作原理 git 对象 在上述三个阶段 文件
  • 基于典型相关分析的故障检测和过程监控算法研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 文献来源 本文首先研究了一种基于广义典型相
  • 安装ik中文分词器

    前提是安装了es Elasticsearch安装 p f 的博客 CSDN博客 1 根据es版本下载对应的中文ik分词器zip资源 官方下载地址 Releases medcl elasticsearch analysis ik GitHub
  • 火狐自定义字体失败 downloadable font: no supported format found

    Bootstrap AdminLTE搭起来的服务 突然字体图标都访问不了了 报错如下 解决办法1 FontAwesome官网找解决办法 不引用本地的css 直接引用官网建议的地址 完美解决 图标都出来了 解决办法2 pom打包的代码中添加
  • Vxe Table/Grid 单元格分组合并

    要合并的列 htbm htmc hetd hetdws yjs 一般的合并 不带逻辑 直接就把各自列对应的相同名字的列合并了 如下所示 不是合同的数据 值一样 直接给合并了 加上逻辑区分后的合并 会依次判断前面的字段一致后才合并后面的字段