el-tree实现懒加载和部分节点默认选中完整代码

el-tree 是 Element UI 中的组件，用于展示树形数据结构。懒加载是指节点数据只在需要时才加载，以提高性能。部分节点默认选中指的是在渲染树形结构时，某些节点根据业务逻辑默认被选中。

以下是一个简单的实现 el-tree 实现懒加载和部分节点默认选中的完整代码示例，使用的是 Vue.js 框架：

<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      lazy
      :load="loadNode"
      :default-checked-keys="defaultCheckedKeys"
      node-key="id"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultCheckedKeys: ['1'], // 默认选中的节点id
    };
  },
  methods: {
    loadNode(node, resolve) {
      // 模拟懒加载处理
      if (node.level === 0) {
        setTimeout(() => {
          // 第一层节点直接展开
          resolve([
            {
              id: '1-1',
              label: '一级-1', label: '二级-1-1' }
              ]
            },
            {
              id: '1-2',
              label: '一级-2',
              children: [
                { id: '1-2-1', label: '二级-1-2' }
              ]
            }
          ]);
        }, 500);
      } else {
        // 其他层节点默认加载空数据
        resolve([]);
      }
    }
  },
  mounted() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.data = [
        {
          id: '1',
          label: '一级 1',
          children: [
            { id: '1-1', label: '二级 1-1' },
            { id: '1-2', label: '二级 1-2' }
          ]
        },
        {
          id: '2',
          label: '一级 2',
          children: [
            { id: '2-1', label: '二级 2-1' }
          ]
        }
      ];
    }, 1000);
  }
};
</script>

在这个代码示例中：

- `data` 是树形结构数据的数组。
- `defaultProps` 是树形组件的属性配置，这里定义了子节点的键名为 `children`，节点显示文本的键名为 `label`。
- `defaultCheckedKeys` 定义了默认选中的节点的id列表。
- `loadNode` 方法用于处理懒加载逻辑，当节点第一次被展开时触发。这里我们通过判断 `node.level` 来决定如何加载数据。如果是根节点，则异步加载子节点数据；否则返回空数组，表示没有子节点。
- `mounted` 钩子函数用于模拟异步加载树形数据。