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

news2024/9/22 19:32:00

问题:系统一直使用的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
        },

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

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

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

相关文章

【MySQL】学习如何通过DQL进行数据库数据的条件查询

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-63IIm2s5sIhQfsfy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

2024年【T电梯修理】及T电梯修理复审模拟考试

题库来源:安全生产模拟考试一点通公众号小程序 T电梯修理是安全生产模拟考试一点通总题库中生成的一套T电梯修理复审模拟考试,安全生产模拟考试一点通上T电梯修理作业手机同步练习。2024年【T电梯修理】及T电梯修理复审模拟考试 1、【多选题】工作结束跨…

Windows驱动开发之环境搭建,长期Waiting for connecting...思路

Windows驱动开发之环境搭建 1、前期准备 Vmware虚拟机软件 Windows10 iso安装包 Visual Studio2022 IDE软件 SDK安装(一定要勾选上debug选项,windbg在里面) WDK(Windows驱动程序工具包) WDK安装请参考官方文档&…

人人都可配置的大屏可视化

大屏主要是为了展示数据和酷炫的效果,布局大部分是9宫格,或者在9宫格上做的延伸,现在介绍下 泛积木-低代码 提供的大屏可视化配置。 首先查看效果展示 泛积木-低代码大屏展示。 创建页面之后,点击进入编辑页面,在可视…

初识命令执行【简介、工作原理和利用方式】

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与学习之用,读者将信息做其他用途,由Ta承担全部法律及连带责任,文章作者不承担任何法律及连带责任。 0、前言 本文看完如果想对应实战相关内容,可…

openGauss学习笔记-211 openGauss 数据库运维-高危操作一览表

文章目录 openGauss学习笔记-211 openGauss 数据库运维-高危操作一览表211.1 禁止操作211.2 高危操作 openGauss学习笔记-211 openGauss 数据库运维-高危操作一览表 各项操作请严格遵守指导书操作,同时避免执行如下高危操作。 211.1 禁止操作 表1中描述在产品的操…

纯html+css+js静态汽车商城

首页代码 <!DOCTYPE html> <html class"no-js" lang"zxx"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&qu…

Datawhale 组队学习之大模型理论基础Task9 大模型法律

第11章 大模型法律 11.1 简介 此内容主要探讨法律对大型语言模型的开发和部署有何规定。 先看看法律的特点&#xff1a; 法律就如我国法律教材所给出的一样&#xff0c;有依靠国家强制力保证实施的特点。 而法律在大模型中也是不可或缺的&#xff0c;缺少了法律的约束&…

【复现】Ivanti Connect Secure命令注入漏洞(CVE-2024-21887)_33

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 Ivanti Connect Secure&#xff08;9.x、22.x&#xff09;和 Ivanti Policy Secure&#xff08;9.x、22.x&#xff09;的 Web 组件…

java8 Duration类学习

Duration类 官网地址 基于时间的时间量&#xff0c;例如“34.5秒”。 此类以秒和纳秒为单位对时间的量或量进行建模。它可以使用其他基于持续时间的单位访问&#xff0c;如分钟和小时。此外&#xff0c;可以使用DAYS单位&#xff0c;并将其视为完全等于24小时&#xff0c;从…

如何利用故障根因分析快速定位故障原因?

「 背 景 」 众所周知&#xff0c;变更是线上环境不稳定的⾸要因素&#xff0c;有研究表明&#xff0c;线上70%的故障都是由某种变更⽽触发的。因此&#xff0c;当⽣产环境发⽣故障产⽣告警时&#xff0c;管理员第⼀直觉是怀疑近期是否发⽣过变更。此时&#xff0c;我们往往需…

Linux ---- Shell编程之正则表达式

一、正则表达式 ​ 由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通配符不同&#xff0c;通配符功能是用…

C++ 数论相关题目 博弈论:拆分-Nim游戏

给定 n 堆石子&#xff0c;两位玩家轮流操作&#xff0c;每次操作可以取走其中的一堆石子&#xff0c;然后放入两堆规模更小的石子&#xff08;新堆规模可以为 0 &#xff0c;且两个新堆的石子总数可以大于取走的那堆石子数&#xff09;&#xff0c;最后无法进行操作的人视为失…

如何在win系统部署Apache服务并实现无公网ip远程访问

文章目录 前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpolar web ui管理界面3.2 创建公网地址 4. 固定公网地址 前言 Apache作为全球使用较高的Web服务器…

MySQL解决 恢复从备份点到灾难点之间数据(不收藏找不到了)

CSDN 成就一亿技术人&#xff01; 今天分享一期 mysql中 备份之后发生灾难造成数据丢失 那么如何恢复中间的数据呢&#xff1f; 数据库数据高于一切&#xff08;任何数据是不能丢失的&#xff09; CSDN 成就一亿技术人&#xff01; 目录 1.准备测试数据库 2.备份数据库 观…

CCF-CSP 202312-1 仓库规划(Java、C++、Python)

文章目录 仓库规划问题描述输入格式输出格式样例输入样例输出子任务 满分代码JavaCPython 仓库规划 问题描述 西西艾弗岛上共有 n n n 个仓库, 依次编号为 1 ⋯ n 1 \cdots n 1⋯n 。每个仓库均有一个 m m m 维向量的位置编码, 用来表示仓库间的物流运转关系。 具体来说,…

机器学习 | 掌握 K-近邻算法 的理论实现和调优技巧

目录 初识K-近邻算法 距离度量 K值选择 kd树 数据集划分 特征预处理 莺尾花种类预测(实操) 交叉验证与网格搜索 初识K-近邻算法 K-近邻算法&#xff08;K-Nearest Neighbor&#xff0c;KNN&#xff09;是一种基本的分类和回归算法。它的基本思想是通过找出与新对象最近…

git远程仓库基本操作

目录 gitremote &#xff08;查看远程仓库&#xff09; git remote add [仓库名] [url] git clone [url]&#xff08;克隆远程仓库到本地&#xff09; git push [名][分支名]&#xff08;提交到远程仓库&#xff09;​编辑 git pull [名][分支名]从远程仓库拉取​编辑 注意操作…

SpringBoot拉取高德行政区域数据

SpringBoot拉取高德行政区域数据 一、账号申请 1.整体流程 行政区域文档&#xff1a;https://lbs.amap.com/api/webservice/guide/api/district 整体流程可参考&#xff1a;https://lbs.amap.com/api/webservice/guide/create-project/get-key 2.注册账号 注册地址&#…

js padEnd方法介绍笔记

padEnd() 是 JavaScript 字符串的方法之一&#xff0c;它用于在当前字符串的末尾添加指定数量的字符&#xff0c;直到字符串达到指定的长度。 padEnd() 方法接受两个参数&#xff1a; 目标长度和要添加的填充字符。 如果当前字符串的长度已经等于或超过目标长度&#xff0c;则不…