可以理解为:将<el-tree>
源码全部复制过来,然后加以改造,集成对应的虚拟Tree相关功能,对外的功能保持完全不变,可以快速移植替换<el-tree>
,无须更改外部的逻辑代码
- 实现虚拟Tree的功能,能够在大数据下实现快速渲染和流畅交互
- 完全模仿el-tree的属性与事件,包括单选、多选、父子联动等
- 完全模仿el-tree的样式,尽可能复制使用el-tree的相关样式
- 考虑拖拽排序相关功能的集成
- 依赖虚拟列表第三方库,后期进行自我实现
- 依赖拖拽排序第三方库,后期进行自我实现
- 初始化数据形成虚拟Tree
- 展开/折叠功能
- 筛选功能
- checkbox功能,包括半选和全选
- 其它参数的集成
- 异步加载
- 拖拽排序
- 完成
<el-tree>
单元测试的覆盖 - 集成vue2版本逻辑到vue3文件夹中
el-virtual-tree.vue
: 虚拟Tree的最外层组件,持有this.store(VirtualTreeStore数据管理类),负责对各种事件进行处理,包括对el-virtual-tree-node.vue
所emit出来的事件进行处理el-virtual-tree-node.vue
: 渲染UI,没有过多逻辑,直接单纯对每一个数据item进行渲染virtual-tree-store.js
:数据管理类,持有this.root(哨兵节点),使用this.root对数据进行更新,也负责一些VirtualNode数据的直接更新virtual-node.js
:每一个数据item就是一个VirtualNode数据,除了从后台拿到的data数据之外,还增加了一些属性,比如level等
依赖第三方库虚拟列表库,需要手动安装
npm install --save vue-virtual-scroller@1.1.2
将整个el-virtual-tree
复制到自己项目中,直接import
相关组件进行使用