el-tree 懒加载，展开默认选中第一个

您可以使用 el-tree 组件的 lazy 属性来实现懒加载，然后在加载完数据后，通过设置 default-expanded-keys 属性来展开默认选中第一个节点。

首先，确保您的数据中包含每个节点的唯一标识符，比如 id。

然后，在 el-tree 上设置 lazy 属性为 true，这将使组件以懒加载的方式渲染节点。

接下来，您可以使用 load 方法来加载节点的子节点数据，并在加载完成后设置 default-expanded-keys 属性来展开默认选中第一个节点。

下面是一个示例代码：

<template>
  <el-tree
    :data="treeData"
    :lazy="true"
    :load="lazyLoad"
    :default-expanded-keys="[defaultSelectedKey]"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树形数据
      defaultSelectedKey: '', // 默认选中的节点的 key
    }
  },
  methods: {
    lazyLoad(node, resolve) {
      // 根据节点的唯一标识符加载子节点数据
      // 这里假设您有一个异步请求获取子节点数据的方法
      // 方法的参数中的 node 为当前节点的数据对象
      // resolve 是一个回调函数，用于将加载的子节点数据传递给组件
      // 示例中的代码仅作为参考，请根据您的实际需求进行修改
      yourAsyncLoadMethod(node.id).then((children) => {
        resolve(children);
        // 默认选中第一个子节点
        if (children.length > 0) {
          this.defaultSelectedKey = children[0].id;
        }
      });
    },
    yourAsyncLoadMethod(nodeId) {
      // 异步请求获取子节点数据的方法
      // 示例中的代码仅作为参考，请根据您的实际需求进行修改
      return new Promise((resolve) => {
        // 模拟异步请求
        setTimeout(() => {
          resolve([
            {
              id: nodeId + '.1',
              label: '子节点1',
            },
            {
              id: nodeId + '.2',
              label: '子节点2',
            },
          ]);
        }, 1000);
      });
    },
  },
};
</script>

在上面的示例代码中，lazyLoad 方法用于加载节点的子节点数据，yourAsyncLoadMethod 方法是一个模拟的异步请求方法，您需要根据实际情况进行修改。

通过设置 default-expanded-keys 属性为 defaultSelectedKey，可以实现展开并选中默认的第一个节点。

请注意，上述示例中的代码仅作为参考，请根据您的具体需求进行修改。