vue-giant-tree

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

Vue3.x 版本在这

为什么需要 vue-giant-tree

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

不服气可以试试这份数据 big-tree.json

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

vue-giant-tree 仅仅是给 ztree 套了一层 Vue 组件的壳，顺便提供了一套更现代化的皮肤，因为主打大数据量场景，所以取名巨树。

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

安装

npm i vue-giant-tree --save

注意：组件依赖 jQuery，务必在页面中提前加载 jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

使用

in script:

import tree from "vue-giant-tree";

export default {
	components: {
          tree
	},
	data() {
		return {
			nodes: [
                    { id:1, pid:0, name:"随意勾选 1", open:true},
                    { id:11, pid:1, name:"随意勾选 1-1", open:true},
                    { id:111, pid:11, name:"随意勾选 1-1-1"},
                    { id:112, pid:11, name:"随意勾选 1-1-2"},
                    { id:12, pid:1, name:"随意勾选 1-2", open:true},
                    { id:121, pid:12, name:"随意勾选 1-2-1"},
                    { id:122, pid:12, name:"随意勾选 1-2-2"},
                    { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
                    { id:21, pid:2, name:"随意勾选 2-1"},
                    { id:22, pid:2, name:"随意勾选 2-2", open:true},
                    { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
                    { id:222, pid:22, name:"随意勾选 2-2-2"},
                    { id:23, pid:2, name:"随意勾选 2-3"}
                ]
		}
	},
    methods: {
        onClick(evt, treeId, treeNode) {

        },
        onCheck(evt, treeId, treeNode) {

        },
        handleCreated(ztreeObj) {

        }
    }
	...

in template:

<tree
  :nodes="nodes"
  @onClick="onClick"
  @onCheck="onCheck"
  @onCreated="handleCreated"
/>

属性

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

事件

完全移植zTree API中callback支持的事件，除了：

• 不支持所有 before 开头的事件。这类事件的主要作用是根据返回值决定是否阻止后续的on事件，这种判断可以在on事件中实现；当然，你也可以通过setting.callback.beforeXXX自行配置
• 不支持 onNodeCreated 事件。因为在大数据量下很耗性能，如果需要可以通过 setting.callback.onNodeCreated 自行传入
• 增加 onCreated 事件。每次实例初始化完成时触发，回调参数接收 ztree 实例，通过 ztree 实例可以使用所有实例方法

事件名称	说明
onAsyncError	参考 zTree API
onAsyncSuccess	参考 zTree API
onCheck	参考 zTree API
onClick	参考 zTree API
onCollapse	参考 zTree API
onDblClick	参考 zTree API
onDrag	参考 zTree API
onDragMove	参考 zTree API
onDrop	参考 zTree API
onExpand	参考 zTree API
onMouseDown	参考 zTree API
onMouseUp	参考 zTree API
onRemove	参考 zTree API
onRename	参考 zTree API
onRightClick	参考 zTree API
onCreated	初始化渲染完成后触发，回调参数接收 ztree 实例

扩展

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

项目 DEMO里演示了 vue-giant-tree 的响应式数据特性。

演示

• 线上演示：

http://refined-x.com/Vue-Giant-Tree/

• 本地演示：

npm i
npm run serve

License

MIT

Copyright (c) 2019-present, 前端路上