feat(question): tree component

* feat(question): add Tree Component

Co-authored-by: 木荣 <[email protected]>
Co-authored-by: webfansplz <[email protected]>

Author: 3 people

questions/208-tree-component/App.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import TreeComponent from "./TreeComponent.vue"
+const treeData = ref([{
+  key: '1',
+  title: 'Parent 1',
+  children: [{
+    key: '1-1',
+    title: 'child 1',
+  }, {
+    key: '1-2',
+    title: 'child 2',
+    children: [{
+      key: '1-2-1',
+      title: 'grandchild 1',
+    }, {
+      key: '1-2-2',
+      title: 'grandchild 2',
+    },]
+  },]
+}, {
+  key: '2',
+  title: 'Parent 2',
+  children: [{
+    key: '2-1',
+    title: 'child 1',
+    children: [{
+      key: '2-1-1',
+      title: 'grandchild 1',
+    }, {
+      key: '2-1-2',
+      title: 'grandchild 2',
+    },]
+  }, {
+    key: '2-2',
+    title: 'child 2',
+  },]
+}])
+</script>
+
+<template>
+  <TreeComponent :data="treeData" />
+</template>

questions/208-tree-component/README.md

@@ -0,0 +1,7 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+For this challenge, you need to imlement a tree component,let’s go.
+
+<!--info-footer-start-->
+<!--info-footer-end-->

questions/208-tree-component/README.zh-CN.md

@@ -0,0 +1,9 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+
+在这个挑战中，你需要实现一个树组件,让我们开始吧。
+
+
+<!--info-footer-start-->
+<!--info-footer-end-->

questions/208-tree-component/TreeComponent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+interface TreeData {
+  key: string
+  title: string
+  children: TreeData[]
+}
+ defineProps<{data: TreeData}>()
+</script>
+
+<template>
+  <!-- do something.... -->
+</template>

questions/208-tree-component/info.yml

@@ -0,0 +1,7 @@
+difficulty: hard
+title: Tree Component
+tags: Components
+author:
+  github: murongg
+  name: 木荣
+

questions/208-tree-component/info.zh-CN.yml

@@ -0,0 +1,7 @@
+difficulty: hard
+title: 树组件
+tags: Components
+author:
+  github: murongg
+  name: 木荣
+