0
点赞
收藏
分享

微信扫一扫

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

萍儿的小确幸 2023-06-13 阅读 43

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

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

  • vue-trees
  • zTrees
  • jsTrees

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

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

链接: vue-easy-tree

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

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

在这里插入图片描述
但是 vue-easy-tree 是不提供类似属性的。

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

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

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

在这里插入图片描述
有兴趣的可以去看看,这里我是参考了 ant-design-vue 的dom。

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

在这里插入图片描述
最后得到的结果如下:

在这里插入图片描述
确认这个ui就是我们要的,下一步就是发布到npm了。

举报

相关推荐

0 条评论