如何获取懒加载后的el-tree全部数据

场景：使用element-ui的el-tree的懒加载模式，在数据懒加载形成树形结构后，要求获取整个树的数据（treeList），el-tree的懒加载是不绑定data，此时是没法拿到实际的树的数据。

解决方案一：自己定义一个存在树形数据的数组treeList，在每次懒加载的relsove的时候，把对应的数据也存treeList数组中，就是拿到懒加载数据，放在treeList对应的children里。

该方案最终肯定是能拿到el-tree树形数据,但是如果涉及到el-tree的排序、删除、更新字段等操作，就需要处理对应的treeList的数据，对el-tree的任何操作就得写对应数据的操作。对于高手肯定不怕，我这种小白就不想写太多的数据操作逻辑，所有提供方案二。

解决方案二：根据懒加载生成的dom树，反推出树形结构的数据。

1、先看下懒加载的el-tree的dom结构，el-tree是整个树，el-tree-node是树的一个节点，el-tree-node里面有el-tree-node__content和el-tree-node__children。el-tree-node__content是显示节点的名称等信息，el-tree-node__children就是该节点的子节点。这不就是典型的树形结构的展示行书。

2、使用el-tree的插槽，通过插槽动态绑定唯一键id,

<el-tree :props="props" :load="loadNode" lazy  >
      <div class="custom-tree-node" slot-scope="{ node }" :id="node.data.id">
        {{ node.label + "33" }}
      </div>
    </el-tree>

在dom上就对应el-tree-node__content里面的元素的属性。

因此可以通过el-tree-node__content获取基本的数据信息，通过el-tree-node__children获取每个子节点的信息。想必到这里，就知道后面要怎么实现了，就是for循环加递归遍历dom节点，生成对应的树数据。

贴完整示例代码

<template>
  <div class="box-item-num">
    <el-tree :props="props" :load="loadNode" lazy  >
      <div class="custom-tree-node" slot-scope="{ node }" :id="node.data.id">
        {{ node.label + "33" }}
      </div>
    </el-tree>

    <el-button @click="forDiGui">获取懒加载树数据</el-button>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      props: {
        children: 'children',
        label: 'label'
      },
      treeDataArr: [],
    };
  },

  methods: {
    forDiGui() {
      let fristTreeItem = document.querySelector(".el-tree").children;
      let treeDataArr = [];
      //递归for循环
      const  forEachDeep=(treeItemArr,treeDataArr)=>{
        let arr = Array.from(treeItemArr);
      arr.forEach((treeItem) => {
        let treedataObj = {};
        if (treeItem.classList.contains("el-tree-node")) {
          treedataObj = this.getbasicIndo(treeItem.children[0]);
          if (
            treeItem.lastChild &&
            treeItem.lastChild.classList &&
            treeItem.lastChild.classList.contains("el-tree-node__children")
          ) {
            let grouptreeItem = treeItem.lastChild.children;
            forEachDeep(grouptreeItem, treedataObj.children);
          }
        }
        if (treedataObj.name) {
          treeDataArr.push(treedataObj);
        }
      });
      }
      forEachDeep(fristTreeItem, treeDataArr);
      console.log("treeDataArr", treeDataArr);
    },
//获取基本节点信息
    getbasicIndo(nodeContent) {
      let nodeContentData = {
        name: nodeContent.lastChild.textContent, //
        id: nodeContent.lastChild.id,
        children: [],
      };
      // console.log(nodeContentData, "nodeContentData");
      return nodeContentData;
    },
    loadNode(node, resolve) {
      setTimeout(() => {
        if (node.level === 0) {
          return resolve([{ id: 2, label: "节点1-1", leaf: false }]);
        } else {
          return resolve([{ id: node.data.id + '1', label: node.data.label + '-' + (node.level - 1), leaf: node.data.leaf }]);
        }
      }, 1000);
    },
  },
};
</script>