vxe-table表格合并行和虚拟滚动冲突

news2024/10/5 21:23:07
项目一直用的vxe-table 2.0版本,支持表格的虚拟滚动,最近要做表格合并行功能,虚拟滚动便失效了,强行虚拟滚动,合并行会有错行现象。
vxe-table2.0给出的解释是:合并行不能和虚拟滚动一起使用。

目前找到两种解决方式:

1.升级表格到3.0版本

vxe-table3.0支持合并行虚拟滚动,但是它支持的是临时合并状态的表格,我们用的一般都是span-methods自定义合并函数。
比如,这种写法是一行一行比较,遇到adjustDicName和commonId相同的就把'index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum',这些字段都合并了。

但这种在vxe-table3.0也是不支持虚拟滚动的。

  // 合并规则
        rowspanMethod({
            row,
            _rowIndex,
            column,
            visibleData
        }) {
            let fields = ['index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum']
            let cellValue = row[column.property]
            let xtmcCell = row['adjustDicName']
            let xtmcCell2 = row['commonId']
            if (fields.includes(column.property)) {
                let prevRow = visibleData[_rowIndex - 1]
                let nextRow = visibleData[_rowIndex + 1]
                if (prevRow && prevRow[column.property] == cellValue && prevRow['adjustDicName'] == xtmcCell && prevRow['commonId'] == xtmcCell2) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    let countRowspan = 1
                    while (nextRow && nextRow[column.property] == cellValue && nextRow['adjustDicName'] == xtmcCell && nextRow['commonId'] == xtmcCell2) {
                        nextRow = visibleData[++countRowspan + _rowIndex]
                    }
                    if (countRowspan > 1) {
                        return {
                            rowspan: countRowspan,
                            colspan: 1
                        }
                    }
                }
            }
        },

看官网例子vxe-table v3
可以通过 merge-cells 做临时合并,我们只要把表格的需要合并状态全部计算提取出来,便可以实现合并行的虚拟滚动。

怎么提取呢?
把需要合并的第一行给你一个标志,比如 以下三行合并num:3,  以下一行合并num:1, 剩下的为num:0

处理数据:

  handleListRowSpan() {
            let prevItem
            this.tableData.forEach(item => {
                item.num = 0
                if (prevItem && prevItem.adjustDicName == item.adjustDicName && prevItem.commonId == item.commonId) {
                    prevItem.num++
                } else {
                    item.num = 1 // 初始化合并行数
                    prevItem = item
                }
                
            })
          console.log('this.tableData',this.tableData)
          let arr=[]
          this.tableData.forEach((ele,index)=>{
                 if(ele.num>1){
                    arr.push({row:index,col:0,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:1,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:2,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:3,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:4,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:5,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:6,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:7,rowspan:ele.num,colspan:1})
                }
          })
        console.log('this.mergeCells,',arr)
        this.mergeCells=arr
        },

第一个循环是把处理成带num:合并行数 或者 num:0 标识的数据
第二个循环是把数据处理成mergeCells需要的数据格式,row:第几行,col:第几列,rowSpan:合并几行,colSpan:合并几列。

灵感来源于这个博友的文章:element-ui表格,el-table多级合并行_element puls 中的tabel表格实现多层级合并-CSDN博客

2.使用el-table-virtual-scroll表格

官网api:el-table-virtual-scroll


这个表格也是支持虚拟滚动和合并行一起使用的。具体可以自己看官网,但是他的表格功能没有vxe-table丰富,如果使用,之前的逻辑的逻辑要改的太多,便没有采用。

总结:方法一:升级表格,对当前需要虚拟加载的合并行表格页面修改的不多,但是升级表格会有系统有不可预知的影响,比如一些废弃的api需要更换,我们之前用的vxe-table-plugin-virtual-tree需要依赖于vxe-table2.0,升级后组件虚拟滚动功能会失效(如何解决下一篇写)等等。在项目前期使用较好。
方法二,换表格,在项目后期使用较好,对系统其他模块没有影响,但是很多功能没有vxe-table齐全。

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

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

相关文章

代码之外的艺术:程序员的写作利器

在这个信息爆炸的时代,知识的管理和团队协作成了重要的技能。对于个人和企业来说,高效的文档和笔记服务平台是保持竞争力的关键工具。今天,让我们深入对比一下当前市场上流行的几款服务:石墨文档、腾讯文档、语雀、有道云笔记、No…

Linux:理解信号量以及内核中的三种通信方式

文章目录 共享内存的通信速度消息队列msggetmsgsndmsgrcvmsgctl 信号量semgetsemctl 内核看待ipc资源单独设计的模块ipc资源的维护 理解信号量总结 本篇主要是基于共享内存,延伸出对于消息队列和信号量,再从内核的角度去看这三个模块实现进程间通信 共享…

剖析Elasticsearch面试题:分词、倒排索引、文本相似度TF-IDF,揭秘分段存储与段合并,解密写索引技巧,应对深翻页问题的实用解决方案!

1、谈谈分词与倒排索引的原理 当谈到Elasticsearch时,分词与倒排索引是两个关键的概念,理解它们对于面试中展示对Elasticsearch工作原理的理解至关重要。 「1. 分词(Tokenization):」 分词是将文本分解成一个个单独…

智能水肥一体化灌溉系统:提升农业生产效率的数字化解决方案

一、设备介绍(key-iot.com.cn): 我们的星创易联设备是智能水肥一体化灌溉系统的核心组成部分。该设备由多个先进的传感器和执行器组成,可以对环境因素、土壤湿度和植物生长状态进行实时监测。其中包括: 1. 土壤湿度传感器:通过监…

电商API接口接入|电商爬虫实践附代码案例

1.爬虫是什么 首先应该弄明白一件事,就是什么是爬虫,为什么要爬虫,百度了一下,是这样解释的:网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追…

CTFHub:web-LD_PRELOAD-WP

解题思路 思路分析 根据资料可得知有四种绕过 disable_functions 的手法: 攻击后端组件,寻找存在命令注入的 web 应用常用的后端组件,如,ImageMagick 的魔图漏洞、bash 的破壳漏洞等等寻找未禁用的漏网函数,常见的执…

《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第5章 决策树(代码python实践)

文章目录 第5章 决策树—python 实践书上题目5.1利用ID3算法生成决策树,例5.3scikit-learn实例《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第5章 决策树 第5章 决策树—python 实践 import numpy as np import pandas as pd import matplotlib.pyplot as plt …

Python中容器类型的数据

目录 序列 序列的索引操作 加和乘操作 切片操作 成员测试 列表 创建列表 追加元素 插入元素 替换元素 删除元素 元组 创建元组 元组拆包 集合 创建集合 修改集合 字典 创建字典 修改字典 访问字典视图 遍历字典 若我们想将多个数据打包并且统一管理&…

分布式虚拟文件系统,如何实现多种存储系统的融合

随着大数据技术和人工智能技术的发展,各种框架应运而生,比如大数据领域中的MapReduce和Spark,人工智能领域中的TensorFlow和PyTorch等。为了给不同的计算框架提供存储服务,存储的服务类型也是很多,常见的如AWS的S3存储…

自然语言nlp学习四

5-5 BMTrain--ZeRO_哔哩哔哩_bilibili 5-6 BMTrain--Pipeline Parallel (流水线并行)_哔哩哔哩_bilibili 5-12 BMCook--背景介绍_哔哩哔哩_bilibili

梦幻水母生图咒语

中文: 珍珠和透明水晶水母漂浮在水池中,浅粉色风格,千年美学,柔和的雾气,转瞬即逝,山寨核,迷人,不加修饰 比例9:16,模型V6,风格默认 StartAI提示词翻译&am…

客户点赞,“信”任满满 | 竹云喜获近百封感谢信!

玉兔辞旧岁,威龙迎新春 在新春佳节来临之际 一封封感谢信、表扬信 纷至沓来 纸短情长 每一封感谢信的背后 都记载着一个动人的故事 字里行间情真意切 激励着竹云继续前行! 国家电投 竹云项目组成员凭借丰富的业务、技术经验、专业的职业素养和较…

redhat8.6配置本地yum源

第一步先挂载本地镜像 df -h 查看是否有镜像,没有默认在/dev/dr0 以下为没有挂载图片2. 挂载本地镜像 mkdir /mnt/rd8 mount /dev/sr0 /mnt/rd8/ 挂载完毕再df -h 看一眼。已经存在/dev/sr03. 填写文件 [rootlinux-server ~]# cd /etc/yum.repos.d/ [rootlinux…

MySQL数据库基础合集

MySQL数据库基础合集 目录 MySQL数据库基础合集SQL关键字DDL关键字DML关键字DQL关键字DCL关键字约束关键字 SQL基础数据类型整数类型字符类型浮点类型时间类型 数据定义语言DDL1.查看数据库2.创建库3.删除库4.切换库5.创建表6.删除表7.查看表8.查看表属性9.插入列10.修改列11.设…

设计模式——模板方法模式(Template Method Pattern)

概述 模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中。模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法模式是一种基于继承的代码复用技术,它是一种类行为型模式。模板方法模式是结…

氢气传感器报警值:守护实验室安全的隐形卫士

随着科技的发展,我们的生活变得越来越便捷,但是与此同时,安全问题也日益凸显。其中,氢气作为一种清洁能源,被广泛应用于各个领域,但是如果不加以控制,氢气泄漏也可能带来严重的安全隐患。因此&a…

成都源聚达:抖音开店卖什么最好

在数字化浪潮的推动下,抖音已成为一个集娱乐与商业于一体的平台,吸引着无数商家和创作者。但在这个竞争激烈的市场中,选择什么样的产品才能在抖音上脱颖而出呢? 自然是那些符合抖音用户喜好的产品。据统计,服饰、美妆、食品、家居…

[k8s系列]:kubernetes·概念入门

文章目录 序言1 kubernetes概述1.1 kubernetes解决的问题1.1.1 部署方式的演变1.1.2 容器化部署——容器编排问题 1.2 kubernetes组件1.2.1 kubernetes组件调用关系1.2.2 调用逻辑示例 序言 序言:本文将从,第一节:kubernetes解决的问题、组件…

Linux实验记录:使用iptables

前言: 本文是一篇关于Linux系统初学者的实验记录。 参考书籍:《Linux就该这么学》 实验环境: VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注: 防火墙作为公网与内网的屏障&#…

2023年黄金市场行业分析(电商数据查询软件):年销售额激增104%,黄金消费持续走热

近日,社交平台上不少年轻人将实物金条在黄金加工店加工成黄金首饰的帖子爆火,不少人也在评论区表示要跟随。可以看到,黄金的热潮还在持续。 根据世界黄金协会《2022年中国金饰市场趋势洞察》报告显示,黄金市场被认为是销售大头的…