el-tree懒加载结合接口案例

好的，以下是一个使用el-tree懒加载结合接口的案例：

假设我们有一个树形结构的组织架构，每个部门下面有多个员工，我们希望在点击部门节点时异步加载该部门下的员工列表。

HTML结构：

<template>
  <el-tree :data="treeData" lazy :load="loadNode">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      {{ data.label }}
    </span>
  </el-tree>
</template>

其中，`treeData`是树形结构的数据，`lazy`属性表示开启懒加载，`load`属性指定加载节点时调用的方法。

JavaScript代码：

<script>
export default {
  data() {
    return {
      treeData: []
    }
  },
  methods: {
    // 加载节点时调用的方法
    loadNode(node, resolve) {
      // 发送异步请求获取该节点下的员工列表
      axios.get('/api/employees', {
        params: {
          departmentId: node.id
        }
      }).then(response => {
        // 将员工列表转换为树形结构
        const employeeNodes = response.data.map(employee => ({
          id: employee.id,
          label: employee.name,
          leaf: true // 叶子节点
        }))
        // 返回员工节点列表
        resolve(employeeNodes)
      })
    }
  },
  created() {
    // 初始化树形结构数据
    axios.get('/api/departments').then(response => {
      this.treeData = response.data.map(department => ({
        id: department.id,
        label: department.name,
        children: [], // 子节点列表将在loadNode方法中动态加载
        leaf: false // 非叶子节点
      }))
    })
  }
}
</script>

在`loadNode`方法中，我们发送异步请求获取该节点下的员工列表，然后将员工列表转换为树形结构，并通过`resolve`方法返回给el-tree组件。在`created`生命周期中，我们发送异步请求获取树形结构的数据，并设置所有非叶子节点的`children`属性为空数组，这样el-tree组件就会在加载节点时调用`loadNode`方法获取子节点列表。

以上就是一个使用el-tree懒加载结合接口的案例，希望能对您有帮助。