vue-virtual-tree

项目说明

基于Vue 2.x 的虚拟树组件

主要算法

1. MPTT 预排序树算法
2. 虚拟滚动

已完成部分

1. MPTT算法部分
2. 虚拟滚动

开发原因及思路

想做这个虚拟树组件，其实还是源于之前有个项目，需要一次加载2万条以上的树数据【为什么不用异步，这个其实有很多原因的】。之后我找遍了全网，发现就只有ztree好用且可以实现需求，vue其实没有什么好的现成的可用方案。最终是用了ztree，但ztree还要用jquery这个大户且样式调整起来相对麻烦。后来到是看到了一个可用的虚拟树组件，是vxe-table下面的vxe-list,不过怎么说呢？这个组件做的好是真的好，但是用起来有点怪怪的（毕竟是一个表格组件中的一个组件功能），所以考虑一下自己开发一个这样的功能【本人不是前端工程师所以前端代码写的不会太好】。

• 为什么要使用MPTT预排序算法？

  虚拟树的组装其实有两种方式，一种是在key上做手脚，生成如：0,0-0,0-0-0这样的分层结构。另一种就是MPTT预排序算法，预排序算法使用左节点和右节点来确认节点的位置（通过排序左节点）和层次（通过左右节点可以直接查出所有父节点和所有子结点）

• 实现步骤

  • 平面数据组装成MPTT结构的平面数据，或者原始树结构拍平成MPTT平面结构
  • 计算哪些数据在可视区域内
  • 模拟滚动
  • 把列表装饰成树状