<script setup lang="ts">
interface TreeData {
key: string
title: string
children: TreeData[]
}
defineProps<{data: TreeData[], level?: number}>()
defineOptions({name: 'TreeComponent'})
</script>
<template>
<!-- do something.... -->
<div :style="{textIndent: (level ?? 0) * 24 + 'px'}">
<summary v-for="value in data" :key="value.key">
<h6>{{value.title}}</h6>
<details v-if="value.children?.length">
<TreeComponent :level="(level ?? 0) + 1" :data="value.children" />
</details>
</summary>
</div>
</template>
