el-tree-select 懒加载

### 关于 `el-tree-select` 组件懒加载的实现方法

#### 配置属性说明

为了使 `el- **lazy**: 设置为 true 后开启懒加载模式。
- **load**: 定义异步加载子节点的方法。

此配置允许树形结构按需加载数据，在初次渲染时不加载全部节点，从而提高性能和用户体验[^1]。

const props = {
  lazy: true,
  load(node, resolve) {
    // 异步获取子节点数据逻辑
    setTimeout(() => {
      const nodes = Array.from({ length: 3 }, (_, i) =>
        ({ value: `${node.level}-${i}`, label: `Item ${node.level}-${i}` })
      );
      
      // 如果是根节点则模拟不同层级的数据
      if (node.level === 0) {
        return resolve([{ value: 'root', label: 'Root Node' }]);
      }
      
      // 当前节点有更多子项时继续展开
      if (node.data.children && node.data.children.length > 0) {
        return resolve(node.data.children);
      }

      // 模拟无更多子项的情况
      resolve(nodes);
    }, 500);  
  },
};

#### 使用示例

下面是一个完整的 Vue 组件实例，展示了如何通过 `props` 属性传递给 `<el-tree-select>` 来启用懒加载特性。

<template>
  <div class="tree-container">
    <el-tree-select
      v-model="selectedValue"
      :data="[]"
      placeholder="请选择..."
      filterable
      clearable
      check-strictly
      :props="props"
      style="width: 100%;"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 初始化选中的值为空数组表示未选择任何项目
let selectedValue = ref([]);

// 自定义懒加载配置对象
const props = {
  lazy: true,
  async load(node, resolve) {
    try {
      let result;
      await new Promise((resolvePromise) => {
        setTimeout(() => {
          // 这里可以替换为实际API调用
          result = [
            { id: "child1", label: "Child One" },
            { id: "child2", label: "Child Two" }
          ];
          resolvePromise();
        }, 1000);
      });
      resolve(result.map(item => ({
        ...item,
        leaf: !Array.isArray(item.children),
      })));
    } catch (error) {
      console.error('Failed to fetch child nodes:', error);
      resolve([]);
    }
  }
}
</script>