tree组件

Author: yt0379

src/components/HelloWorld.vue

@@ -7,13 +7,16 @@
     <!-- <FormExample></FormExample> -->
     <!-- 插槽 -->
     <!-- <SlotExample></SlotExample> -->
+    <!-- 递归 -->
+    <TreeExample></TreeExample>
   </div>
 </template>
 
 <script>
 import Communication from '@/components/communication';
 import FormExample from '@/components/form';
 import SlotExample from '@/components/slots';
+import TreeExample from '@/components/recursion';
 
 export default {
   name: 'HelloWorld',
@@ -23,7 +26,8 @@ export default {
   components: {
     Communication,
     FormExample,
-    SlotExample
+    SlotExample,
+    TreeExample
   },
 }
 </script>

src/components/recursion/Tree.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="kkb-tree">
+    <TreeNode v-for="item in data" :key="item.title" :model="item"></TreeNode>
+  </div>
+</template>
+
+<script>
+import TreeNode from "@/components/recursion/TreeNode.vue";
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true
+    }
+  },
+  components: {
+    TreeNode
+  }
+};
+</script>
+
+<style scoped>
+.kkb-tree {
+  text-align: left;
+}
+</style>

src/components/recursion/TreeNode.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div @click="toggle" :style="{paddingLeft: (level-1)+'em'}">
+      <label>{{model.title}}</label>      
+      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+    </div>
+    <div v-show="open" v-if="isFolder">
+      <tree-node class="item" v-for="model in model.children" 
+        :model="model" :key="model.title"
+        :level="level + 1"></tree-node>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tree-node",
+  props: {
+    model: Object,
+    level: {
+      type: Number,
+      default: 1
+    }
+  },
+  data: function() {
+    return {
+      open: false
+    };
+  },
+  computed: {
+    isFolder: function() {
+      return this.model.children && this.model.children.length;
+    }
+  },
+  methods: {
+    toggle: function() {
+      if (this.isFolder) {
+        this.open = !this.open;
+      }
+    },
+  }
+};
+</script>

src/components/recursion/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <Tree :data="treeData"></Tree>
+</template>
+
+<script>
+import Tree from "@/components/recursion/Tree.vue";
+export default {
+  data() {
+    return {
+      treeData: [
+        {
+          title: "Web全栈架构师",
+          children: [
+            {
+              title: "Java架构师"
+            },
+            {
+              title: "JS高级",
+              children: [
+                {
+                  title: "ES6"
+                },
+                {
+                  title: "动效"
+                }
+              ]
+            },
+            {
+              title: "Web全栈",
+              children: [
+                {
+                  title: "Vue训练营",
+                  expand: true,
+                  children: [
+                    {
+                      title: "组件化"
+                    },
+                    {
+                      title: "源码"
+                    },
+                    {
+                      title: "docker部署"
+                    }
+                  ]
+                },
+                {
+                  title: "React",
+                  children: [
+                    {
+                      title: "JSX"
+                    },
+                    {
+                      title: "虚拟DOM"
+                    }
+                  ]
+                },
+                {
+                  title: "Node"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  },
+  components: {
+    Tree
+  }
+};
+</script>