用zTree替代Element UI的Tree，解决大数据卡顿问题

Posted 2023-03-28

参考技术A Vue Element UI的Tree组件在加载大量节点时会出现明显的卡顿，电脑配置差点更是难受。即使使用懒加载，即每展开父节点再去加载子节点，若字节点数目同样众多，Tree组件在使用过程中依旧卡顿。这里提供一个jquery的方案，使用zTree替代Element UI的Tree组件，让树组件使用非常流畅。
因为树节点数目众多，使用zTree依旧延续展开父节点再去加载子节点的方式。

zTree： http://www.treejs.cn/v3/main.php#_zTreeInfo 。首先是zTree的标签：

参照zTree官方文档，配置zTree的setting：

展开父节点加载对应的子节点：

接下来设置滚动条。这里用到了vuescroll组件： https://vuescrolljs.yvescoding.org/zh/guide/

父节点的勾选状态有三种：勾选、半选（即只有部分子节点选中）、不勾选。
父节点勾选，则新加载的子节点全部勾选。

记录checkArray、pathArray

修改Element-ui中tree组件最底层节点的样式

参考技术A 最近在项目中，设计将tree组件里最底层的节点布局设计成了多列，那要怎么实现呢？

首先用自定义节点的方式渲染节点，在渲染方法里给最底层节点添加class

添加class后，在节点展开的事件里给需要多列显示的节点添加样式

最终效果