el-tree懒加载数据量太大的解决方案

一、找到路径：node_modules => element-ui => packages => tree ,然后把tree这个文件夹拷贝下来，放到自己项目文件价里，比如，我放到了components文件夹里。二、打开node.js文件，找到doCreateChildren方法，把这段代码加上if (array && array.length > 2000)

浅巷长歌999

4778人浏览 · 2022-03-03 14:50:13

浅巷长歌999 · 2022-03-03 14:50:13 发布

一、第一种方法：
参考地址

QQ录屏20220303161445

①、
找到路径：node_modules => element-ui => packages => tree ,然后把tree这个文件夹拷贝下来，放到自己项目文件价里，比如，我放到了components文件夹里。

②、
打开node.js文件，找到doCreateChildren方法，把这段代码加上

if (array && array.length > 2000) {
      let arr = array.splice(60, array.length - 60)
      let num = 0
      let handler = setInterval(() => {
        for (let i = 0; i < 500; i++) {
          if (num < arr.length) {
            this.insertChild(objectAssign({ data: arr[num] }, defaultProps), undefined, true)
            num++
          }
        }
        if (num === arr.length) {
          clearInterval(handler)
        }
      }, 0)
    } else {
      array.forEach((item) => {
        this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true)
      })
    }

在这里插入图片描述
③、
在文件里引入tree组件，就可以使用了

④、全部代码

<template>
  <div>
    <!-- <el-tree
      lazy
      :load="loadNode"
      highlight-current
      node-key="nodeId"
      :props="props"
    >
    </el-tree> -->
    <dataTree
      lazy
      :load="loadNode"
      highlight-current
      node-key="nodeId"
      :props="props"
    ></dataTree>
  </div>
</template>

<script>
import axios from "axios";
import mock from "../.././../../src/mock/mock.js";
import dataTree from "../../../components/tree/src/tree.vue";
export default {
  components: {
    dataTree,
  },
  data() {
    return {
      props: {
        label: "nodeCname",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.loadTreeList(resolve);
      } else {
        this.selectNodeChildren(node.data.nodeId, resolve);
      }
    },
    loadTreeList(resolve) {
      axios
        .get("http://localhost:8080/parentTree")
        .then(function (res) {
          if (res.data.data.length !== 0) {
            resolve(res.data.data);
          } else {
            resolve([]);
          }
        })
        .catch(function (res) {
          console.log("error", res);
        });
    },
    selectNodeChildren(_parentID, resolve) {
      // 获取子节点请求
      axios
        .get("http://localhost:8080/childTree")
        .then(function (res) {
          if (res.data.data.length !== 0) {
            resolve(res.data.data);
          } else {
            resolve([]);
          }
        })
        .catch(function (res) {});
    },
  },
};
</script>

<style>
</style>

二、第二种方法

下载依赖
npm install @wchbrad/vue-easy-tree
引入依赖
import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件，可以根据需要自定义样式或主题
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
 
export default {
  components: {
    VueEasyTree
  }
}

完整代码

<template>
  <div class="ve-tree">
    <vue-easy-tree
      lazy
      :load="loadNode"
      highlight-current
      node-key="nodeId"
      :props="props"
      height="calc(100vh - 100px)"
    >
    </vue-easy-tree>
  </div>
</template>

<script>
import axios from "axios";
import { child } from "./child.js";
import { parent } from "./parent.js";
import mock from "../.././../../src/mock/mock.js";

import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件，可以根据需要自定义样式或主题
// import "@wchbrad/vue-easy-tree/src/assets/index.scss";

export default {
  components: {
    VueEasyTree,
  },
  data() {
    return {
      childs: child,
      parents: parent,

      props: {
        label: "nodeCname",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.loadTreeList(resolve);
      } else {
        this.selectNodeChildren(node.data.nodeId, resolve);
      }
    },
    loadTreeList(resolve) {
      let me = this;
      axios
        .get("http://localhost:8080/parentTree")
        .then(function (res) {
          if (res.data.data.length !== 0) {
            resolve(me.parents);
          } else {
            resolve([]);
          }
        })
        .catch(function (res) {});
    },
    selectNodeChildren(_parentID, resolve) {
      let me = this;
      // 获取子节点请求
      axios
        .get("http://localhost:8080/childTree")
        .then(function (res) {
          if (res.data.data.length !== 0) {
            resolve(me.childs);
          } else {
            resolve([]);
          }
        })
        .catch(function (res) {});
    },
  },
};
</script>

<style>
</style>