vue3-ztree

:vue3-ztree: 基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染。

为什么需要vue3-ztree

Vue的数据监听机制决定了在大数据量场景下的渲染性能非常低下，基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染，在IE浏览器（即便是IE11）中很容易导致页面卡死甚至浏览器崩溃。

为了摆脱数据监听，只能放弃通过Vue渲染，采用常规DOM操作的方式。在这个领域ztree是当之无愧最成熟的方案，因此vue3-ztree直接基于ztree做上层封装，以组件的形式将ztree的配置和事件暴露出来，使其可以方便的在Vue项目中安装使用。

vue3-ztree仅仅是给ztree套了一层Vue组件的壳，顺便提供了一套更现代化的皮肤，因为主打大数据量场景。

ztree在性能优化方面已经做到了近乎极致，感谢ztree作者的工作，向您致敬！

安装

npm i vue3-ztree --save

使用

属性

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | --- | --- | | setting | ztree 配置 | Object | {view: {showIcon: false}} | | nodes | ztree 数据 | Array | [] |

事件

完全移植zTree API中callback支持的事件

扩展

zTree没有提供给整个实例更新数据的方法，vue3-ztree基于Vue的组件通信机制扩展实现了响应式数据特性，只要nodes的值发生变化，ztree实例就会随之更新。

项目DEMO里演示了vue3-ztree的响应式数据特性。

演示

• 线上演示：

• 本地演示：

npm i 
npm run serve 

License

MIT