Vue el-tree懒加载初始化展开的实现与优化

1. el-tree懒加载初始化展开的实现原理

在Vue.js项目中使用Element UI的el-tree组件时，懒加载(lazy load)是一种常见的性能优化手段。但很多开发者会遇到一个典型问题：如何在初始化时就自动展开根节点及其下级节点？这个需求在组织架构树、文件目录树等场景中非常常见。

1.1 懒加载机制解析

el-tree的懒加载通过lazy属性和load方法配合实现。当用户点击展开节点时，组件会调用load方法动态加载子节点数据。这种机制的核心特点是：

1. 按需加载：只有展开节点时才请求数据
2. 层级控制：通过node.level判断当前节点层级
3. 异步回调：通过resolve函数返回子节点数据

javascript复制<el-tree
  :load="loadNode"
  lazy
  node-key="id"
/>

1.2 初始化展开的关键

要实现初始化展开，必须理解两个核心属性：

1. default-expanded-keys：指定默认展开节点的key数组
2. node-key：每个节点的唯一标识字段

关键技巧在于：在根节点数据加载完成后，立即将根节点ID加入defaultExpandedKeys。这会触发组件自动展开这些节点，进而触发子节点的懒加载。

javascript复制fetchRootData(resolve) {
  setTimeout(() => {
    const rootNodes = [
      { id: 1, label: 'Root Node 1', leaf: false },
      { id: 2, label: 'Root Node 2', leaf: false }
    ]
    this.defaultExpandedKeys = rootNodes.map(node => node.id)
    resolve(rootNodes)
  }, 500)
}

2. 完整实现方案

2.1 组件模板配置

基础模板需要包含以下关键属性：

html复制<template>
  <el-tree
    ref="treeRef"