vue3 tree 层级 简单实现

<template>
  <div class="tree">
    <div v-for="(item, index) in list" :key="index" class="item">
      <div>{{ item.label }}</div>
      <div class="child">
        <tree :list="item.children" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  });
  // const emits = defineEmits(['change']);

  // function pageChange(page, pageSize) {
  //   const data = { page, pageSize };
  //   emits('change', data);
  // }
</script>
<style scoped lang="less">
  .tree {
    .item {
      margin-left: 10px;

      .child {
        margin-left: 10px;
      }
    }
  }
</style>
<!-- 父页面引入使用
<tree :list="list"></tree>
import tree from '@/components/testOne/tree.vue';
const list = [
  {
    label: '第一层',
    children: [
      {
        label: '第一层子第一层',
        children: [
          {
            label: '第一层子第一层第一层',
          },
        ],
      },
    ],
  },
]; -->