elementui tree 支持虚拟滚动和treeLine (上)

背景:在使用elementui+vue2.x进行项目开发时,有用到el-tree组件,但是在数据很多时会卡顿

基于以上背景elementui 提供的el-tree组件无法满足需求。

期间在网上调研了很多相关的tree组件,例如:

  • vue-trees
  • zTrees
  • jsTrees

发现以上组件,要么无法支持虚拟滚动。要么是api不够完善,定制化功能不强。

最终在查阅相关资料时,发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件

链接: vue-easy-tree

同时这款组件还能完美的继承elementui tree上的属性和方法,算是过渡最为平滑的组件了。

需求变更:虽然虚拟滚动实现了,但是在演示的时候领导觉得,还是加个treeLine 更好看

所谓的treeLine 就是tree展开时,侧边那一条条带有结构性质的边线。也就是:

elementui tree 支持虚拟滚动和treeLine (上)_第1张图片
但是 vue-easy-tree 是不提供类似属性的。

没办法,对比再三还是决定从vue-easy-tree的源码上进行调整,毕竟业务代码已经写了那么多了。

所以我们的解决方案就是 在vue-easy-tree 的基础上进行二次调整,后面再发布我们自己的npm包,重新引入后,就不用去动其他的代码了。

相关代码我本地已经修改,并提交了pull 请求

elementui tree 支持虚拟滚动和treeLine (上)_第2张图片
有兴趣的可以去看看,这里我是参考了 ant-design-vue 的dom。

把动态的 width=18,36,54px ,改为固定宽度为18 的多个span标签

elementui tree 支持虚拟滚动和treeLine (上)_第3张图片
最后得到的结果如下:

elementui tree 支持虚拟滚动和treeLine (上)_第4张图片
确认这个ui就是我们要的,下一步就是发布到npm了。

你可能感兴趣的:(VUE,爬坑,elementui,vue.js,javascript)