今天给大家分享一个优秀的Vue海量数据渲染树组件，VueGiantTree。

vue-giant-tree一个由ztree封装的vue树组件。轻松实现大数据的高性能渲染，适合海量数据渲染场景。

zTree简介zTree简介

用jQuery实现的多功能“树插件”。最高3.7K+星。优秀的性能，灵活的配置，多种功能的组合是zTree最大的优势。

特性特征

zTree v3.0 支持核心代码按需加载采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器支持JSON、静态 和 Ajax 异步加载节点数据支持任意更换皮肤 / 自定义图标（依靠css）支持极其灵活的 checkbox 或 radio 选择功能提供多种事件响应回调灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟在一个页面内可同时生成多个 Tree 实例简单的参数配置实现 灵活多变的功能http://***.treejs.cn/https://github.com/zTree/zTree_v3

以上是对ztree.js的简单介绍，如果需要了解更多，可以自己去官网查阅文档。

你为什么需要vue-giant-tree

Vue的数据监控机制决定了在大数据量的场景下渲染性能很低。基于Vue的常规树组件几乎无法高性能渲染成千上万的数据，在IE浏览器中容易导致页面卡顿甚至浏览器崩溃。

vue-giant-tree基于ztree直接封装，可以高效渲染海量数据。

安装

$ npm i vue-giant-tree -S

使用插件

<template> <div class="wrap-tree"> <tree :nodes="nodes" /> </div></template><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"} ] }} }</script>

附上示例及项目地址附上例子和项目地址。

# demo地址https://refined-x.com/Vue-Giant-Tree/# 仓库地址https://github.com/tower1229/Vue-Giant-Tree