208 - 树组件

[18200722014]

// 你的答案
<script setup lang="ts">
interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
defineProps<{data: TreeData[]}>()
</script>

<template>
  <!-- do something.... -->
  <ul>
    <li v-for="item in data" :key="item.key">
      {{ item.title }}
      <TreeComponent v-if="item.children && item.children.length" :data="item.children" />
    </li>
  </ul>
</template>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style: none;
  }

  ul > li {
    padding-left: 15px;
  }
</style>