el-tree的懒加载树 应用到项目中

<template>
  <el-tree
    :data="treedata"//放你的数据结构
    :props="props"//这个是数据中展示的字段
    :load="loadNode"//懒加载的方法
    lazy//开启懒加载
    v-model="checkedNodes"
  />
</template>

<script>
export default {
      data(){
        return {
              treedata: [], //tree数据
              props: {
                label: `name`,
                children: `children`, // 显示子节点的字段名
                isLeaf: (node) => !node.Parent && !node.children,//这个事件是不让没有子数据的在显示左箭头
              },
              checkedNodes:[],
        }
      },
      methods:{
            getTreeData () {
                const params = {
                    传参:传参,
                    Id: null,//一开始的拿第一层数据的时候为null或者""空
                };
                getTreeData(params).then((res) => {
                  if (res.result === true) {
                    this.treedata = res.resultdata.data;
                  }
                  else {
                    this.$message({
                      type: `warning`,
                      message: `获取信息出错`,
                    });
                  }
                });
            },
            // tree的懒加载数据
            loadNode (node, resolve) {
              if (node.level === 0) {
                return resolve(this.treedata);//将第一层的数据也展示出来
              }
              //这个999是让用户选择的时候能打开多层,
              // 如果只写3的话就默认只能打开3层，数据多的话
              // 影响用户体验
              if (node.level > 9999) return resolve([]);
              // 请求子节点数据
              setTimeout(() => {
                const params = {
                    传参:传参,
                    Id: node.data.id,//第一层为null或者""空,这一层我们传懒加载方法中的id
                };
                getTreeData(params).then((data) => {
                  if (data.result === true) {
                    node.childNodes = [...node.childNodes, ...data.resultdata.data];
                    const updatedChildren = node.childNodes.map((child) => {
                      child.checked =
                        this.checkable &&
                        this.checkedNodes.some((node) => node.id === child.id);
                      return child;
                    });
                    resolve(updatedChildren);
                  }
                  else {
                    this.$message({
                      type: `warning`,
                      message: `获取信息出错`,
                    });
                  }
                });
              }, 500);
            },
      }
}
</script>

以上仅供参照，按照自己的实际情况来改写