vxe-table从2.0升级到3.0,vxe-table-plugin-virtual-tree虚拟滚动失效

问题:系统一直使用的vxe-table2.0,vxe-table2.0不支持树的虚拟滚动,为了解决这个问题,引入了vxe-table-plugin-virtual-tree插件,现在系统vxe-table升级3.0,vxe-table-plugin-virtual-tree的虚拟滚动失效了。


原因:查询官网,发现vxe-table-plugin-virtual-tree依赖于2.0版本,因为3.0版本已经有自己的虚拟树了,便不再在维护了。。

解决:还能咋办,换树。支持虚拟滚动的树有很多。


第一种  vue-easy-tree  支持虚拟滚动

参考博客:https://blog.csdn.net/weixin_40992252/article/details/135154113?spm=1001.2014.3001.5501

第二种:使用vxe-table3.0中的虚拟树

vxe-table3.0中的虚拟树和vxe-table-plugin-virtual-tree的虚拟书最大的区别是数据结构不同,

vxe-table-plugin-virtual-tree的树的数据结构是垂直的树形结构,children里面套children

vxe-table3.0中的虚拟树的数据结构是扁平的

那么需要垂直结构转成扁平结构,通过下方代码即可


        treeToList(list) {
            let res = []
            for (const item of list) {
                const { children, ...i } = item
                if (children && children.length) {
                res = res.concat(this.treeToList(children))
                }
                res.push(i)
            }
            return res
        },

如果有其他功能还需要改,再对表格的其他功能改一改,整体修改量不大。
因为这个树既可以是树,也可以是表格树,在我们系统中比较使用,选用的是这个。

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

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

相关文章

Python第三方扩展库Matplotlib

Python第三方扩展库Matplotlib Matplotlib 是第三方库,不是Python安装程序自带的库,需要额外安装,它是Python的一个综合性的绘图库,提供了大量的绘图函数用于创建静态、动态、交互式的图形和数据可视化,可以帮助用户创…

Android App开发-简单控件(1)——文本显示

本章介绍了App开发常见的几类简单控件的用法,主要包括:显示文字的文本视图、容纳视图的常用布局、响应点击的按钮控件、显示图片的图像视图等。然后结合本章所涉及的知识,完成一个实战项目“简单计算器”的设计与实现。 1.1 文本显示 本节介绍…

(九)springboot实战——springboot3下的webflux项目参数验证及其全局参数验证异常处理

前言 在上一节内容中,我们介绍了如何在webflux项目中自定义实现一个全局的异常处理器ErrorWebExceptionHandler,正常情况下其可以处理我们系统的运行时异常,但是无法处理参数验证的异常WebExchangeBindException,所以这里提供另外…

彻底解决 MAC Android Studio gradle async 时出现 “connect timed out“ 问题

最近在编译一个比较老的项目,git clone 之后使用 async 之后出现一下现象: 首先确定是我网络本身是没有问题的,尝试几次重新 async 之后还是出现问题,网上找了一些方法解决了本问题,以此来记录一下问题是如何解决的。 …

JavaWeb学习|Session

学习材料声明 所有知识点都来自互联网,进行总结和梳理,侵权必删。 引用来源:尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 Session 1、Session 就一个接口(HttpSession)。 2、Session 就是会话。它是用来…

虚拟化平台、主机

虚拟化技术介绍 一、常见虚拟化技术 二、虚拟化与云计算的关系 虚拟化是什么 虚拟化是一种技术,就是将不可拆分的实体资源变成可以自由划分的逻辑资源,从而实现资源的整合、隔离、在分配,云计算就是利用了虚拟化技术的这个特点 云计算是…

java框架面试篇

Spring框架 spring Bean线程安全问题 Scope注解 我们可以在bean的类上加Scope注解来声明这个Bean是单个实例还是多个实例。在默认情况下Bean是单个实例的,此时的注解中的属性默认为Scope("singleton"),Scope("prototype")则是一…

BP图片降噪MATLAB代码

BP(Back Propagation)神经网络是一种常用的深度学习模型,可以用于图像降噪。主要步骤包括: 构建BP神经网络模型。包括输入层、隐藏层和输出层。输入层大小与图像大小相同,输出层大小也与输入图像大小相同。隐藏层根据图像复杂度设定。 准备训练数据。使用干净图像作为输入,加…

WIN11 - WSL(Windows Subsystem for Linux) 安装教程

前言 WSL,即Windows Subsystem for Linux,是一种在Windows操作系统上运行Linux二进制文件的兼容层。该层提供了Linux环境和GNU工具,可以在Windows系统上运行Linux应用程序。WSL使得开发人员可以在Windows系统上使用Linux工具和命令行界面&am…

Web自动化—Cypress 测试框架概述

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号:互联网杂货铺,回复1 ,免费获取软件测试全套资料,资料在手,薪资嘎嘎涨 Cypress 测试框架概述 1.1 Cypress 默认文件结构 在C…

漏洞原理远程命令执行

漏洞原理远程命令/代码执行 远程命令执行函数(Remote Command Execution Function)是指在一个网络环境中,通过远程执行命令来控制另一个计算机系统或设备的功能。 远程命令执行函数可以通过网络协议(如SSH、Telnet、RPC等&#x…

苹果电脑哪款文件管理器好用?推荐QSpace Pro多窗格文件管理器

还在找好用的Mac文件管理器?苹果电脑哪款文件管理器好用?推荐QSpace Pro多窗格文件管理器,灵活且实用! Mac软件下载安装:多窗格文件管理QSpace Pro 首先,我被QSpace的简洁和高效所吸引。它的界面设计非常清…

第九节HarmonyOS 常用基础组件13-TimePicker

1、描述 时间选择组件,根据指定参数创建选择器,支持选择小时以及分钟。默认以24小时的时间区间创建滑动选择器。 2、接口 TimePicker(options?: {selected?: Date}) 3、参数 selected - Date - 设置选中项的时间。默认是系统当前的时间。 4、属性…

代码随想录算法训练营第35天 | 860.柠檬水找零 + 406.根据身高重建队列 + 452.用最少数量的箭引爆气球

今日任务 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球 860.柠檬水找零 - Easy 题目链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 在柠檬水摊上,每一杯柠檬水的售价为 5 美元。顾客排队购买你的…

Backtrader 文档学习-Bracket Orders

Backtrader 文档学习-Bracket Orders 1. 概述 组合订单类型是一个非常宽泛的订单类别,只要brokder支持的订单类型都可以, 包括(Market, Limit, Close, Stop, StopLimit, StopTrail, StopTrailLimit, OCO)。 该功能用于回测,交互broker Brac…

VBA语言専攻介绍(更新)

VBA语言専攻简介 我给VBA的定义:VBA是个人小型自动化处理的有效工具。我这里专注VBA,垂直度非常高,并和多个国际VBA网站(英语系和德语系)有互动及技术互通。您来到这里,就是进入到了一个绚烂的VBA世界&…

vue-computed 计算属性

一、computed 计算属性 在Vue应用中&#xff0c;在模板中双向绑定一些数据或者表达式&#xff0c;但是表达式如果过长&#xff0c;或者逻辑更为复杂 时&#xff0c;就会变得臃肿甚至难以维护和阅读&#xff0c;例如&#xff1a; <div>写在双括号中的表达式太长了,不利于阅…

【数据结构:顺序表】

文章目录 线性表顺序表1.1 顺序表结构的定义1.2 初始化顺序表1.3 检查顺序表空间1.4 打印1.5 尾插1.6 头插1.7 尾删1.8 头删1.9 查找1.10 指定位置插入1.11 删除指定位置数据1.12 销毁顺序表 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一…

​如何在Shopee平台上进行品牌选品

在如今竞争激烈的电商市场上&#xff0c;建立一个成功的品牌对于卖家来说至关重要。Shopee作为一个知名的电商平台&#xff0c;为卖家提供了广阔的销售机会。然而&#xff0c;在Shopee平台上进行品牌选品并不是一件容易的事情。卖家需要遵循一些策略&#xff0c;以确保选品能够…

uniapp如何添加多个表单数组?

目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 四、小结 注意事项 总结模板&#xff1a; 一、实现思路 1.在 data 中定义一个数组&#xff0c;用于存储表单项的数据 2.在模板中使用 v-for 指令渲染表单项 3.在 methods 中…