（万级数据量）ztree懒加载，勾选父节点时勾选全部子节点的信息，支持数量限制、展示选中节点信息、删除、回显、编辑等

 展示一波视频，如下：

简单描述一下背景，在组织树上存在4w设备，如何不卡顿的切不一层层展开节点之后选中父节点，相对应的选取子节点的信息。

前提条件：该项目采用vue2

准备条件：

1.ztree （非必须，element  并未支持虚拟树，如果vue3+element-plus可以用el-tree-v2）

API Document [zTree -- jQuery tree plug-ins.]

2 async/queue （非必须，当结构较深时，在浏览器中用于创造队列来并发调接口，减少接口调用时间以及效率最大化）

async - Documentation

思路分析：

1.首先点击弹框，加载顶层数据，渲染ztree

<giant-tree
  ref="giantTree"
  :nodes="treeData"
  :setting="treeSetting"
  @onCreated="onTreeCreated"
/>
...
callback: {
  beforeCheck: async (treeId, treeNode) => {
    return await this.beforeCheck(treeNode)
  },
  onCheck: (event, treeId, treeNode) => {
     return this.onNodeCheck(treeNode)
  },
   beforeExpand: (treeId, treeNode) => {
     return this.beforeExpand(treeNode)
  }

...
// 该处，获取顶层数据，并且展开第一层，
// 进入页面时，触发onTreeCreated 随后 this.zTree.expandNode(nodes[0], true, false, true, true) 默认展开父节点，此时触发beforeExpand钩子

 async beforeExpand(treeNode) {
   if (!treeNode.children || treeNode.children.length === 0) {
     await this.fetchTreeData(treeNode.id, treeNode)
   }
  },

// 此时巧妙的巧用根节点下面的一层数据

 async fetchTreeData(parentId = '', node) {
      try {
        this.zTreeLoading = true
        const response = await this.$api[this.api]({
          type: this.lazyLoad ? 1 : 2,
          deviceType: this.deviceType,
          platformId: this.platformId === '' ? undefined : this.platformId,
          platformType: this.platform