这是一个Vue3 el-tree树结构组件，名称为Tree，它是一个递归组件，用于展示树形结构数据。

<template> 标签中包含了组件的模板代码，用于渲染组件的UI。

<script> 标签中定义了组件的行为和数据逻辑，使用了 Vue3 的 composition API。其中，使用了 defineComponent 定义组件，并声明了 props，setup 方法用于初始化数据和行为。在 setup 方法中使用 reactive 函数创建响应式对象，并返回 toggle 和 data 两个属性。

<style> 标签中定义了组件的样式。

组件的模板代码中：

使用了 v-for 指令，循环渲染 data 中的每个节点。
:key 绑定每个节点的唯一标识符 item.id。
在每个节点中，使用了条件渲染，v-if 指令用于判断节点是否有子节点，并且子节点是否需要展示。
在每个节点中，点击 showDiv 元素时触发 toggle 方法，用于切换子节点的展示状态。
在每个节点中，如果当前节点有子节点且需要展示，则递归渲染子节点，使用组件的自身。

在 <script> 标签中：

使用 defineComponent 函数定义了一个名为 Tree 的组件。
props 属性定义了组件的输入参数，即 data 数组。
在 setup 方法中，定义了 toggle 函数用于切换节点的展示状态，使用 reactive 函数创建了响应式对象 state，初始化数据为 props.data。
通过 return 语句返回 toggle 和 data 属性。

在 components 属性中，定义了组件的自身，即递归使用的 Tree 组件，也声明了它的 props 和 setup 方法。

在标签中，定义了组件的样式，使节点显示在同一行，并使 showDiv 元素显示在右上角。

``` <template >

<div class="tree" >
  <ul >
    <li
      v-for="item in data"
      :key="item.id"
      class="list-none"
    >
      <div >
        {{ item.label }}
        <div
          v-if="item.children"
          class="showDiv"
          @click="toggle(item)"
        >
          {{ item.open?'隐藏':'展示' }}
        </div >
      </div >

      <Tree
        v-if="item.children && item.open"
        :data="item.children"
      />
    </li >

  </ul >
</div >
</template >

<script >
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "Tree",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  setup (props) {
    const toggle = (item) => {
      item.open = !item.open;
    };

    const state = reactive({ data: props.data });

    return {
      toggle,
      data: state.data,
    };
  },
  components: {
    Tree: defineComponent({
      name: "Tree",
      props: ["data"],
      setup (props) {
        const toggle = (item) => {
          item.open = !item.open;
        };

        return { toggle };
      },
    }),
  },
});
</script >

<style lang="scss" scoped >
.list-none{
  position: relative;
.showDiv{
  position: absolute;
  right: 0;
  top: 0;
}
}

</style >

手写的一个vue3 el-tree树结构组件，提供给大家参考，有好的建议欢迎在评论区浏览

这是一个Vue3 el-tree树结构组件，名称为Tree，它是一个递归组件，用于展示树形结构数据。