208 - Tree Component

[kai-phan]

<script setup lang="ts">
import { h } from 'vue';
interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
defineProps<{data: TreeData[]}>();

const Tree = (props, { slots }) => {
  const { data } = props;

  if(!data) return slots.default();

  return h('ul', data.map((el, i) => {
    return h('li', null, [el.children ? el.title: undefined, h(Tree, { data: el.children }, () => el.title )])
  }))

}
</script>

<template>
  <!-- do something.... -->
  <Tree :data="data"/>
</template>