Vue-Giant-Tree：基于ztree封装的Vue树形组件实现海量数据高性能渲染

【Github】项目名：Vue-Giant-Tree：基于ztree封装的Vue树形组件实现海量数据高性能渲染

一、项目简介

Vue-Giant-Tree是一个基于ztree封装的Vue树形组件。由于Vue的数据监听机制在大数据量场景下渲染性能低，常规Vue树组件难以胜任上万条数据的高性能渲染，在IE浏览器（如IE11）易导致页面卡死或浏览器崩溃。而ztree在性能优化方面近乎极致，vue-giant-tree直接基于ztree做上层封装，以组件形式暴露ztree的配置和事件，方便在Vue项目中安装使用，并且提供了更现代化的皮肤，因主打大数据量场景而取名巨树。

二、安装与使用

1. 安装

通过npm安装，命令为：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>。

2. 使用

在脚本中：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) {}}。在模板中：<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实例可使用所有实例方法）。并且vue-giant-tree基于Vue的组件通信机制扩展实现了响应式数据特性，只要nodes的值发生变化，ztree实例就会随之更新，项目DEMO里演示了此特性。

四、项目总结

Vue-Giant-Tree项目为Vue开发中处理树形结构且面临海量数据渲染性能问题提供了很好的解决方案。如果大家对这个项目有任何想法或者建议，欢迎在下方留言参与讨论。

项目地址

GitHub链接直达