今天給大家分享一款超棒的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，就分享到這裡。希望能對大家有所幫助，歡迎一起交流分享哈！