208 - 树组件

[zzhao8053]

<script setup lang="ts">
interface TreeData {
  key: string
  title: string
  children?: TreeData[]
}
defineProps<{data: TreeData[], level?: number}>()
defineOptions({
  name: "TreeComponent"
})
</script>

<template>

 <div :style="{textIndent: (level ?? 0) * 24 + 'px'}">
    <details open v-for="value in data">
      <summary>{{value.title}}</summary>
      <TreeComponent v-if="value.children?.length" :level="(level ?? 0) + 1" :data="value?.children || []" />
    </details>
  </div>
</template>