适用vue3的树结构

要在Vue3中实现树形结构，可以使用组件的方式来实现。首先，你可以创建一个名为Tree的组件，该组件负责渲染树形列表，并提供展开和折叠功能。然后，在Tree组件内部，你可以使用递归的方式来渲染树的每个节点。

将递归渲染的节点定义为一个名为TreeNode的组件，并在Tree组件中进行调用。TreeNode组件可以接收一个节点对象作为props，然后根据节点的层级进行缩进，并根据层级判断是否为第5级数据，添加底色。还可以根据数据样式进行样式显色。

在Tree组件中，可以设置一个data属性来存储树形结构的数据。该数据可以是一个包含对象的数组，每个对象表示一个节点。每个节点对象可以包含子节点的信息，以实现树形结构。

当点击节点时，可以通过绑定一个click事件来实现展开和折叠的功能。在click事件处理函数中，可以更新节点对象的一个属性来标识节点的展开或折叠状态。然后，通过控制节点对象的展开状态来决定是否渲染子节点。

最后，将Tree组件在Vue的实例中进行注册，并在模板中使用该组件即可实现适用于Vue3的树形结构。

下面是一个示例代码，展示了如何使用Vue3的组件方式实现树形结构：

<template>
  <Tree :data="treeData" />
</template>

<script>
import Tree from './Tree.vue';

export default {
  components: {
    Tree,
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1.1',
              children: [
                {
                  id: 3,
                  label: 'Node 1.1.1',
                  children: [],
                },
                {
                  id: 4,
                  label: 'Node 1.1.2',
                  children: [],
                },
              ],
            },
            {
              id: 5,
              label: 'Node 1.2',
              children: [],
            },
          ],
        },
        // ...其他节点数据
      ],
    };
  },
};
</script>

在上述示例中，Tree组件接收一个名为treeData的props，用于传递树形结构的数据。每个节点对象包含id和label属性，以及一个children数组，用于存储子节点信息。

通过递归调用TreeNode组件来渲染树的每个节点，并根据节点的层级进行缩进和样式处理。

这样，你就可以使用Vue3的组件方式来实现适用于Vue3的树形结构了。