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

项目一直用的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齐全。

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

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

相关文章

华为配置小型网络WLAN 的基本业务示例

配置小型网络WLAN基本业务示例 组网图形 图1 配置小型网络WLAN基本业务组网图 小型WLAN网络简介配置注意事项组网需求数据规划配置思路操作步骤配置文件 小型WLAN网络简介 本文介绍的WLAN网络是指利用频率为2.4GHz或5GHz的射频信号作为传输介质的无线局域网,相对于有…

【css】设置渐变阴影

css的属性中没有直接设置渐变阴影的,但是可以通过伪元素去实现。 .box-wrap{width: 100%;display: grid;place-content: center; } .box {width: 150px;height: 150px;background: #eee;border: 1px solid #585252;position: relative;transform: translate(0);/* …

论文阅读,Domain Specific ML Prefetcher for Accelerating Graph Analytics(一)

目录 一、Article:文献出处(方便再次搜索) (1)作者 (2)文献题目 (3)文献时间 (4)引用 二、Data:文献数据(总结归纳,方便理解&am…

微调入门篇:大模型微调的理论学习

1、为什么大模型微调 之前在《大模型这块蛋糕,想吃吗》介绍了普通人如何搭上大模型这块列车, 其中有一个就是模型微调,这个也是未来很多IT公司需要发力的方向,以及在《垂直领域大模型的应用更亲民》中论述了为什么微调适合大家,以及微调有什么价值? 作为小程序猿在开始进行微…

Mac截图软件CleanShot X为什么不能识别文字?CleanShot X文字识别教程

好多朋友在使用CleanShot X for Mac截图软件过程中发现不能进行OCR文字识别?其实这是因为你没有给CleanShot X相应的权限导致的,具体操作如下: 第一步、打开,系统偏好设置-隐私与安全设置-完全磁盘访问权限 点击左下方➕ 在应用程…

能替代微软AD的国产化方案,搭建自主可控的身份管理体系

随着国产化替代步伐加速,以及企业出于信息安全建设的需要,越来越多的企业和组织开始考虑将现有的微软 Active Directory(AD)替换为国产化的LDAP身份目录服务(也称统一身份认证和管理)系统。本文将介绍一种国…

App测试中ios和Android有哪些区别呢?

App测试中,大家最常问到的问题就是:ios和 Android有什么区别呢? 在Android端,我们经常会使用 JavaScript、 HTML、 CSS等技术来编写一些简单的 UI界面。而 iOS端,我们经常会使用到 UI设计、界面布局、代码结构、 API等…

【经典项目】Java入门,实现斗地主小游戏

一、需求分析 实现斗地主游戏可以涉及以下几个关键步骤和思路: 游戏规则定义:首先,你需要明确斗地主游戏的规则,包括牌的花色和大小、玩家数量、发牌顺序、出牌规则、胜利条件等。 牌的表示和初始化:定义一套扑克牌的…

AtCoder Beginner Contest 338F - Negative Traveling Salesman【floyd+状态压缩dp】

原题链接:https://atcoder.jp/contests/abc338/tasks/abc338_f Time Limit: 6 sec / Memory Limit: 1024 MB Score: 500 points、 问题陈述 有一个有N个顶点和M条边的加权简单有向图。顶点的编号为 1 到 N,i/th 边的权重为 Wi​,从顶点 U…

十年创业记-01-草根搭上时代快车

十年创业的点点滴滴,记录起步、发展到壮大的过程,有失败的教训,有成功的经验,也有一些建议,与君共勉。 今年35岁,创业的第九年,坐标十八线小城市,软件外包行业。从2015年20万的营业额…

GWIT 和GWFI

关于燃烧的历史: -UL request needle flame (open fire) test to rate flammability per UL-94 Vxx UL 要求针焰(明火)试验以评定UL-94的易燃性。 - industry recognized that glowing wires ( caused by electrical overload) may put …

SQL注入攻击 - 基于布尔的盲注

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 查看靶场详情:SQL Injections 一、判定是否有注入点 以下是一个常见的步骤: 在URL中尝试输入特殊字符,如: " \ -- 等,并观察页面返回的内容。在URL中尝试输入错误的…

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

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

c语言 -文件操作-详解

目录 1.为什么使用文件? 2.什么是文件? 2.1程序文件 2.2数据文件 2.3文件名 3.⼆进制⽂件和⽂本⽂件? 测试 4. ⽂件的打开和关闭 4.1 流和标准流 4.1.1 流 4.1.2 标准流 4.2 ⽂件指针 4.3文件的打开和关闭 4.3.1熟悉了解⽂件的打…

Linux:进程信号

文章目录 信号的概念实践信号关于前台和后台进程的操作 操作系统与外设信号的产生 前面的篇章结束了信号量的话题,那么接下来引入的是信号的话题,信号和信号量之间没有任何关系,只是名字比较像 信号的概念 在生活中存在各种各样的信号&…

现代C++之万能引用、完美转发、引用折叠FrancisFrancis

转载:现代C之万能引用、完美转发、引用折叠 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/99524127 后期参考(还未整合):C 完美转发深度解析:从入门到精通_c完美转发-CSDN博客https://blog.csdn.net/qq_21438461/article/details/129938466 0.导语 …

【数据结构 05】双链表

一、原理 双链表又称双向链表&#xff0c;通常情况下是带头循环结构&#xff0c;在CSTL标准模板库中封装的<list.h>头文件就是带头双向循环链表。 特性&#xff1a;增删灵活且高效&#xff0c;支持随机增删但不支持随机访问 设计思路&#xff1a; 链表包含一个头节点h…

如何提高工业数据采集的效率和准确性-天拓四方

随着工业4.0和智能制造的兴起&#xff0c;工业数据采集的重要性日益凸显。通过数据采集&#xff0c;企业能够实时监控生产过程&#xff0c;优化资源配置&#xff0c;提高生产效率。在实时监控、生产优化、质量控制等方面&#xff0c;有效的数据采集系统能够为企业提供宝贵的洞察…

Pinely Round 2 F. Divide, XOR, and Conquer

F. Divide, XOR, and Conquer 题意 给定一个非负整数数组 a a a&#xff0c;定义操作&#xff1a; 对于区间 [ l , r ] [l,r] [l,r]&#xff0c;选择一个分界点 l ≤ k < r l \leq k < r l≤k<r&#xff0c;将其分成 [ l , k ] [l,k] [l,k] 和 [ k 1 , r ] [k…

系统架构设计师教程(十六)嵌入式系统架构设计理论与实践

嵌入式系统架构设计理论与实践 16.1 嵌入式系统概述16.1.1 嵌入式系统发展历程16.1.2 嵌人式系统硬件体系结构16.2 嵌入式系统软件架构原理与特征16.2.1 两种典型的嵌入式系统架构模式16.2.2 嵌入式操作系统16.2.3 嵌入式数据库16.2.4 嵌入式中间件16.2.5 嵌入式系统软件开发环…