0.1.3 • Published 2 years ago
vue3-ztree v0.1.3
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