vue3树形结构动态

Vue3中的树形数据结构通常用于构建菜单、文件系统、组织架构等需要递归展示的数据结构。动态加载意味着数据不是一次性加载完成的，而是通过事件触发，如点击节点或滚动页面时才加载下级节点。在Vue3中，我们可以使用Composition API或者Options API结合Vuex管理状态，以及`v-for`和`ref`组件进行操作。

以下是创建一个动态树形结构的基本步骤：

1. 定义一个树形数据模型（通常是数组），每个节点包含一个子节点数组。
2. 使用`v-for`遍历节点，显示当前节点及其子节点。
3. 当用户交互时（比如点击），通过`@click`事件触发函数，从服务器或本地存储获取并更新子节点列表，然后用`$set`方法更新当前节点的子节点。
4. 可能的话，可以利用懒加载策略（例如`vue-infinite-loading`库）来控制何时请求更多数据。

<template>
  <ul ref="treeList">
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.label }}
      <ul v-if="item.children && !item.expanded">
        <LazyLoad :data="item.children" />
      </ul>
      <!-- 添加展开/收起按钮 -->
      <button @click="toggleChildren(item)" v-if="item.children">{{ item.expanded ? '收起' : '展开' }}</button>
    </li>
  </ul>
</template>

<script>
import LazyLoad from 'vue-infinite-loading';

export default {
  components: { LazyLoad },
  data() {
    return {
      treeData: [], // 初始树形数据
      expandedItems: new Set(), // 记录已展开的节点
    };
  },
  methods: {
    toggleChildren(node) {
      this.$set(node, 'expanded', !node.expanded);
      if (node.expanded) {
        this.expandedItems.add(node.id);
      } else {
        this.expandedItems.delete(node.id);
      }
      // 加载更多数据
      this.loadMore(node);
    },
    loadMore(parentNode) {
      // 根据业务逻辑在这里请求新的子节点数据
      const loadChildren = () => /* ... */;
      loadChildren().then((newChildren) => {
        parentNode.children.push(...newChildren);
      });
    },
  },
};
</script>