vue.js+ztree 树形组件Vue-GiantTree

Vedu • 2020-08-19 11:23 • 程序开发 • 阅读 4162

今天给大家分享一款超棒的Vue海量数据渲染树形组件VueGiantTree。

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

zTree简介

一个依靠 jQuery 实现的多功能 “树插件”。star高达3.7K 。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

特性

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

http://www.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

ok，就分享到这里。希望能对大家有所帮助，欢迎一起交流分享哈！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/9728.html

vue.js+ztree 树形组件Vue-GiantTree

zTree简介

相关推荐

发表评论