vue实现三级el-tree懒加载树

好的，下面是实现三级懒加载树的基本思路：

1. 定义树形结构的数据，包括每个节点的id、label、是否有子节点、子节点id等信息。

2. 使用el-tree组件进行树形结构的展示，其中第一级节点可以通过props的data属性传入，第二级和第三级节点需要通过load方法进行懒加载。

3. 在load方法中，获取当前节点的子节点信息，可以通过ajax请求后端接口获取数据。在获取的数据中，需要将每个节点的hasChildren属性设置为true或false，表明该节点是否还有子节点，同时需要将子节点的id信息存储在该节点的children属性中。

4. 当用户点击某个节点时，会触发el-tree组件的node-click事件，此时可以通过该事件的参数node获取当前节点的信息，从而获取该节点的子节点信息。

5. 在load方法中，可以根据当前节点的信息判断是第二级节点还是第三级节点，然后再根据节点的id信息去获取对应的子节点信息。

6. 最后将获取到的子节点信息通过callback函数返回给el-tree组件，从而完成懒加载操作。

下面是一个简单的示例代码：

<template>
  <el-tree :data="data" :load="loadNode"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级节点1',
          hasChildren: true,
          children: []
        },
        {
          id: 2,
          label: '一级节点2',
          hasChildren: true,
          children: []
        }
      ]
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载第二级节点
        this.loadSecondLevelNode(node, resolve);
      } else if (node.level === 1) {
        // 加载第三级节点
        this.loadThirdLevelNode(node, resolve);
      }
    },
    loadSecondLevelNode(node, resolve) {
      // 发送ajax请求获取该节点的子节点信息
      const params = { parentId: node.data.id, level: 2 };
      axios.get('/api/getChildren', { params })
        .then(res => {
          const data = res.data;
          data.forEach(item => {
            item.hasChildren = true;
            item.children = [];
          });
          resolve(data);
        })
        .catch(error => {
          console.log(error);
          resolve([]);
        });
    },
    loadThirdLevelNode(node, resolve) {
      // 发送ajax请求获取该节点的子节点信息
      const params = { parentId: node.data.id, level: 3 };
      axios.get('/api/getChildren', { params })
        .then(res => {
          const data = res.data;
          data.forEach(item => {
            item.hasChildren = false;
            item.children = [];
          });
          resolve(data);
        })
        .catch(error => {
          console.log(error);
          resolve([]);
        });
    }
  }
}
</script>