前言

经常会遇到树状结构的页面，刚开始不是一股脑把树状数据全加载出来了，而是基于懒加载 点击节点后调取接口再展开。基于vue3和elementPlus的el-tree组件做个记录~

基本思路

浏览el-tree组件，可以发现有对应的说明和API

下面是实现的完整demo：

<template>
  <el-tree :data="treeData" accordion :load="loadNode" :lazy="true"></el-tree>
</template>

<script setup>
import { ref } from 'vue'
import { ElTree } from 'element-plus'

// 初始化树数据
const treeData = ref([])

// 模拟异步加载节点数据
async function loadNode(node, resolve) {
  console.log({ node })
  if (node.level === 0) {
    // 顶层节点，直接加载
    const data = await fetchRootData()
    resolve(data)
  } else {
    // 子节点，延迟加载
    setTimeout(async () => {
      const data = await fetchChildData(node.key)
      resolve(data)
    }, 1000)
  }
}

// 获取顶层节点数据
async function fetchRootData() {
  // 在这里编写获取顶层节点数据的逻辑，可以调用后端接口等方式获取数据
  // 返回一个符合Element Plus el-tree要求的数组格式，例如：
  return [
    { id: 1, label: '节点1', children: [], isLeaf: false },
    { id: 2, label: '节点2', children: [], isLeaf: false },
    { id: 3, label: '节点3', children: [], isLeaf: false },
  ]
}

// 获取子节点数据
async function fetchChildData(parentKey) {
  // 在这里编写获取子节点数据的逻辑，可以调用后端接口等方式获取数据
  // 返回一个符合Element Plus el-tree要求的数组格式，例如：
  return [
    { id: parentKey + '-1', label: '子节点1', children: [], isLeaf: true },
    { id: parentKey + '-2', label: '子节点2', children: [], isLeaf: true },
    { id: parentKey + '-3', label: '子节点3', children: [], isLeaf: true },
  ]
}
</script>

说明：在上述代码中，使用vue3的script setup 语法来编写组件的逻辑部分。通过ref创建了一个响应式变量treeData来存储树的数据。使用Element Plus提供的ElTree组件，并传入相应的属性。
关于懒加载的实现，通过load属性指定了一个回调函数loadNode。在这个函数中，判断当前节点的层级level，如果为顶层节点（level === 0），则直接加载顶层节点数据；如果为子节点，则采用延迟加载的方式，在setTimeout中模拟异步获取子节点数据。

注意，延迟加载的时间可以根据实际情况进行调整。在fetchRootData和fetchChildData函数中，也可以根据实际需求编写相应的逻辑，例如调用后端接口来获取节点数据，并返回符合el-tree要求的数组格式。