vue 树默认展开三级，后续懒加载

Vue.js 中的树形数据展示通常涉及到递归组件和懒加载（lazy loading），特别是当你处理大量数据或者性能优化的时候。如果你想让树结构默认展开到第三级，同时后续层级采用懒加载的方式，你可以这样做：

1. **初始数据准备**：在数据模型中，给每个节点添加一个 `loadChildren` 属性，表示该节点是否还有子节点需要加载。初始状态时，前三级的节点 `loadChildren` 设为 `true`，其余设为 `false`。

data() {
  return {
    treeData: [
      { id: '1', name: '根节点', loadChildren: true },
      // 其他第二级节点...
      { id: '1.1', name: '第三级节点 1', loadChildren: true },
      { id: '1.2', name: '第三级节点 2', loadChildren: true },
      // ...更多的各级节点，初始时 loadChildren 设置为 false
    ],
  };
}

2. **模板部分**：在 Vue 的模板中，可以使用 `v-if` 或者 `v-show` 指令控制节点的渲染，当 `loadChildren` 为 `true` 时，显示节点，而子节点则用 `<transition>` 组件包裹，设置为 `appear` 动画效果，在数据实际加载后再呈现。

<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.name }}
      <transition name="fade">
        <li v-if="item.loadChildren" v-for="(child, childIndex) in item.children" :key="childIndex">{{ child.name }}</li>
      </transition>
    </li>
  </ul>
</template>

3. **懒加载函数**：在 JavaScript 部分，创建一个 `loadChildren` 函数，它接收当前节点作为参数，并从服务器获取实际的子节点数据。当用户点击某个节点时，触发这个函数并更新其 `loadChildren` 属性。

methods: {
  loadChildren(node) {
    fetch(`api/get_children/${node.id}`)
      .then(response => response.json())
      .then(children => {
        node.children = children;
        // 更新所有同级和下级节点的 loadChildren 为 false
        this.treeData.forEach((data, i) => {
          if (i !== node.index && data.parentId === node.id) {
            data.loadChildren = false;
          }
        });
      })
      .catch(error => console.error(error));
  }
}