feat: 建立树形控件

Author: wangkaiwd

src/views/dirTree/index.vue

@@ -1,13 +1,65 @@
 <template>
-  <div>目录树</div>
+  <div class="dir-tree">
+    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'index'
+    name: 'DirTree',
+    data () {
+      return {
+        data: [{
+          label: '一级 1',
+          children: [{
+            label: '二级 1-1',
+            children: [{
+              label: '三级 1-1-1'
+            }]
+          }]
+        }, {
+          label: '一级 2',
+          children: [{
+            label: '二级 2-1',
+            children: [{
+              label: '三级 2-1-1'
+            }]
+          }, {
+            label: '二级 2-2',
+            children: [{
+              label: '三级 2-2-1'
+            }]
+          }]
+        }, {
+          label: '一级 3',
+          children: [{
+            label: '二级 3-1',
+            children: [{
+              label: '三级 3-1-1'
+            }]
+          }, {
+            label: '二级 3-2',
+            children: [{
+              label: '三级 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick (data) {
+        console.log(data);
+      }
+    }
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .dir-tree {
 
+  }
 </style>