vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree

已于 2022-08-18 19:50:52 修改
阅读量2.3w 收藏 78
点赞数 24
分类专栏： vue components 文章标签： vue.js javascript treeview
于 2021-11-01 16:34:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brad_chao/article/details/121082281
版权

目录

源

卡顿假死

预研

开发

业务中使用

组件中引入

功能列表

使用

2022-08-18 兼容性更新

发现不少同学在使用过程中未安装babel插件导致jsx无法解析的问题，基于上述原因，现在移除了babel插件，已升级到v1.0.9版本，不会出现类似如下报错

（图片来自某位同学的报错截图）

向前兼容旧版本。

 

源

由于业务开发过程中有树形数据，因此需要用到tree树形组件，鉴于项目是基于vue的，前期的ui组件库选型就是element-ui，于是采用了el-tree组件。但在实际使用过程中出现了几个意外。

卡顿假死

server端返回全部数据时，渲染全量的tree组件时前端直接卡死，排查发现业务数据大部分子节点的量级在万以上。页面卡死这种事是要直接“掉脑袋”的，马上换成懒加载模式。

改成懒加载模式后，前两层节点的渲染和展开明显改善，用户体验也正常了，但是逐层点开测试时，发现还是存在问题，第三层有些节点超过2万节点，点击渲染仍然没有解决问题，查了下element-ui的issue，发现有不少人存在这个问题，且element-ui维护者尚未解决此问题，只能自己解决这个问题了。

预研

首先搜集了下github上现有的虚拟滚动tree组件，发现大部分都没有提供完善的功能，如checkbox、懒加载、节点过滤、节点拖拽等功能。基于业务开发角度，element-ui的功能是比较齐全的，因此想法是基于el-tree融合虚拟滚动vue-virtual-scroller（github上最多星的虚拟滚动组件）开发一个多功能虚拟滚动tree组件。

开发

将el-tree的相关scss样式文件和js文件从element-ui包中抽取出来，重新组合后形成无虚拟滚动功能的完整tree组件。

vue-virtual-scroller需要设置virtual-scrol

最低0.47元/天 解锁文章
Brad_chao
关注
专栏目录
vue3 自定义el-tree树形结构样式
小白小白从不日别的博客
09-16 760
这里也可以用模拟的数据，下面用的是后端请求的真实数据。这里样式设置主要用到了 windcss。
vue 使用 vxe-list 实现虚拟列表实现虚拟树，virtual list 大数据量树列表
我的博客
04-28 8808
vxe-table vxe-list 实现虚拟树，大数据量树列表 在 vue 渲染树结构是比较卡的，特别是数据大了，展开缩写都要几秒，那么解决问题的思路就是减少 dom 渲染，使用虚拟列表来模拟树结构，这个方式可以渲染大量的数据，缺点是每次点击展开、收缩都要重新更新列表，可能会闪一下，效果略差，但是支持渲染大数据量。 实现虚拟树的步骤： 拍平树结构 构建列表树结构 处理展开收缩 测试中：渲染...
vue-virtual-tree:基于Vue3的大量数据的树组件
04-30
虚拟树 基于vue3封装的树组件，该树组件专用于大数据量，如果数据量不大，则使用此组件会有点浪费 英文＆ 如何使用 npm i vue-virtual-tree 全局注册，但这会丢失类型，如果您使用打字稿，则不建议使用此方法 import { createApp } from 'vue' ; import VirTree from 'vue-virtual-tree' ; createApp ( App ) . use ( VirTree ) . mount ( '#app' ) ; In components : < vir> 部分注册，您可以获得完整的类型 < template> < div xss=removed> < vir xss=removed> < / div > < / template > < s
Vue + element-ui el-tree 虚拟滚动
p_5050的博客
04-27 4085
vue项目中使用了element-ui的el-tree树节点对数据进行了渲染，奈何数据量太大导致页面卡死或需要3s以上才可渲染出来。为了解决以上问题，查询资料对问题进行了解决，对此进行整理。希望可以帮到你。
Vue-EasyTree安装与配置完全指南
gitblog_09634的博客
09-13 378
Vue-EasyTree安装与配置完全指南 vue-easy-tree A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virt...
vue 移动端树结构功能_Vue 实现树形视图数据功能
weixin_39609503的博客
12-20 595
利用简单的树形视图实现，熟悉了组件的递归使用这是模拟的树形图数据let all={name:'all',children:{A:{name:'A',children:{a1:{name:'a1',children:{a11:{name:'a11',children:null},a12:{name:'a12',children:null}}},a2:{name:'a2',children:{b21:...
el-tree-v2虚拟滚动树，实现代码勾选、动态禁用勾选、检索、节点文字label宽度超出滚动等功能
nlhhln的博客
04-28 2155
某个需求要展示大量树节点，原本使用普通el-tree，默认不要展开太多层次（注意树节点默认全部展开页面渲染很卡），勉强能应付，但是检索功能会展开所有节点，还是很卡顿，只能硬着头皮改版，就想到了用element-plus的虚拟滚动树。查了网上没有多少el-tree-v2的使用文章，下面是自己的踩坑过程，给有需要的人提供些帮助。
基于vue element-UI 的 virtual-tree （虚拟树）
banglei123的博客
04-18 4711
使用 @femessage/element-ui 插件 详情 1.安装 npm i @femessage/element-ui -S 2.引入 import { Tree as virtualTree } from '@femessage/element-ui' Vue.component('virtualTree', virtualTree) 3.使用 注：1.虚拟滚动必须固定height 2.element-ui 的树搜索依赖dom。所以虚拟滚动会对搜索有影响。自定义搜索方法 &
vue 使用 ztree 超大量数据，前端树形结构展示
cdd9527的博客
06-12 623
vue 使用 ztree 超大量数据，前端树形结构展示
css优化--vue2和vue3中虚拟滚动，懒加载实现
hkduan的博客
03-21 3759
假设实际开发中服务端一次响应10万条列表数据，此时设备屏幕只允许容纳10条，那么用户理论上只可以看见10条数据。此时如果前端将10万条数据全部渲染成DOM元素，可能造成程序卡顿，占用较大资源，非常影响用户体验，那么虚拟滚动技术就完美的解决了这一问题。5、使用css3的transform属性将滚动到上方不可见区域的DOM元素偏移到可见区域，同时进行数据的更新(重绘操作节约性能)。4、计算滚动了几个item到顶部不可见区域。3、计算屏幕容纳几个item。2、列表单个item的高度。
elementui tree 支持虚拟滚动和treeLine （上）
嗝~
06-09 2912
最终在查阅相关资料时，发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件。同时这款组件还能完美的继承elementui tree上的属性和方法，算是过渡最为平滑的组件了。需求变更：虽然虚拟滚动实现了，但是在演示的时候领导觉得，还是加个treeLine 更好看。所谓的treeLine 就是tree展开时，侧边那一条条带有结构性质的边线。确认这个ui就是我们要的，下一步就是发布到npm了。的源码上进行调整，毕竟业务代码已经写了那么多了。
Vue 实现树形视图数据功能
08-27
主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的，在实现过程中熟悉了组件的递归使用，感兴趣的朋友跟随脚本之家小编一起学习吧
Vue组件(一) - 二次封装ElementUI实现tree树形组件
HUMM
05-31 2103
文章目录功能描述代码base-tree.vue:treeDemo.vue: 功能描述 基础功能同el-tree 代码 base-tree.vue: <!-- * @Description: 公共树组件 * @Author: HMM * @Date: 2021-01-11 16:23:23 * @FilePath: base-tree.vue 变量： expandNode：是否展开所有节点 isShowFilter: 是否需要节点过滤 treeProps: 树形结构配置项 事件： @h
vue树形多列_基于element-ui el-table 开发虚拟列表(树形列表)
weixin_39957186的博客
12-20 1790
前言基于之前支持表单验证的el-table开发完成后，在数据量过大的时候，会出现渲染慢，表格卡顿等致命问题，而element-ui的el-table本身没有像antd一样提供虚拟列表的demo和相关支持，因此本文在上次的开发基础上，继而开展虚拟列表的开发。本次分为普通列表和树形列表两种，树形在普通列表上面多了一些情况考虑，例如展开收缩等。虚拟列表虚拟列表简单概述就是滚动分页，通过有限的视口来切片大...
探索 Vue 的强大树形组件：vue-easy-tree
gitblog_00069的博客
08-09 816
探索 Vue 的强大树形组件：vue-easy-tree vue-easy-treeA tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.项目地址:https://gitco...
vue-easy-tree 项目推荐
gitblog_09170的博客
09-13 270
vue-easy-tree 项目推荐 vue-easy-tree A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual...
`vue-easy-tree` 教程：从入门到实践
gitblog_00806的博客
08-08 1369
vue-easy-tree 教程：从入门到实践 项目地址:https://gitcode.com/gh_mirrors/vu/vue-easy-tree 1. 项目介绍 vue-easy-tree 是一个基于 Vue 2.x 的可扩展和高性能的树状组件，支持少量或大量数据的显示，以及虚拟滚动功能。它提供了多种操作选项，如拖放、搜索和自定义样式，适用于各种前端项目中的树形数据展示需求。 2. 项目快...
超大量数据，前端树形结构展示
weixin_40992252的博客
12-22 9804
由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。}, 500);
vue.js 展示树状结构数据,动态生成 HTML 内容
最新发布
呵呵哒!的博客
09-23 738
展示树状结构数据：展示评级信息：动态生成 HTML 内容：数据初始化：组件创建时：方法说明： 数据定义 ():created生命周期钩子:方法:
vue-virtual-scroll-list 嵌套el-tree
06-06
vue-virtual-scroll-list是一个可以用于大规模数据渲染的Vue组件库，而el-tree是element-ui库中的一个树形控件。将vue-virtual-scroll-list嵌套在el-tree中可以优化大量数据的展示效果。具体实现方法如下： 首先，在template中使用vue-virtual-scroll-list，将数据传递给它，并渲染出列表。在el-tree中，需要在节点上自定义一个slot，并将vue-virtual-scroll-list作为插槽内容。 其次，在js代码中，需要监听el-tree的某些事件，如节点的展开和关闭等事件。当节点展开时，需要从后端请求该节点下的数据，并将数据传递给vue-virtual-scroll-list进行渲染；当节点关闭时，需要将该节点下的数据从列表中删除。
评论 63
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值