feat:add tree demo

src/components/Breadcrumb/index.vue

@@ -24,7 +24,7 @@ export default {
       let matched = this.$route.matched.filter(item => item.name)
       const first = matched[0]
       if (first && first.name !== 'dashboard') {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
       }
       this.levelList = matched
     }

src/router/index.js

@@ -21,6 +21,7 @@ import Layout from '../views/layout/Layout'
 export const constantRouterMap = [
   { path: '/login', component: _import('login/index'), hidden: true },
   { path: '/404', component: _import('404'), hidden: true },
+
   {
     path: '/',
     component: Layout,
@@ -29,36 +30,42 @@ export const constantRouterMap = [
     hidden: true,
     children: [{
       path: 'dashboard',
-      component: _import('dashboard/index'),
-      meta: { title: 'dashboard', icon: 'dashboard' }
+      component: _import('dashboard/index')
     }]
   },
 
   {
     path: '/example',
     component: Layout,
-    redirect: 'noredirect',
+    redirect: '/example/table',
     name: 'Example',
     meta: { title: 'Example', icon: 'example' },
     children: [
       {
-        path: 'index',
-        name: 'Form',
-        component: _import('page/form'),
-        meta: { title: 'Form', icon: 'form' }
+        path: 'table',
+        name: 'Table',
+        component: _import('table/index'),
+        meta: { title: 'Table', icon: 'table' }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: _import('tree/index'),
+        meta: { title: 'Tree', icon: 'tree' }
       }
     ]
   },
 
   {
-    path: '/table',
+    path: '/form',
     component: Layout,
-    redirect: '/table/index',
-    children: [{
-      path: 'index',
-      name: 'Table',
-      component: _import('table/index'),
-      meta: { title: 'Table', icon: 'table' }}
+    children: [
+      {
+        path: 'index',
+        name: 'Form',
+        component: _import('form/index'),
+        meta: { title: 'Form', icon: 'form' }
+      }
     ]
   },
 

src/views/tree/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-container">
+    <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input>
+
+    <el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2"></el-tree>
+
+  </div>
+</template>
+
+<script>
+export default {
+  watch: {
+    filterText(val) {
+      this.$refs.tree2.filter(val)
+    }
+  },
+
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    }
+  },
+
+  data() {
+    return {
+      filterText: '',
+      data2: [{
+        id: 1,
+        label: 'Level one 1',
+        children: [{
+          id: 4,
+          label: 'Level two 1-1',
+          children: [{
+            id: 9,
+            label: 'Level three 1-1-1'
+          }, {
+            id: 10,
+            label: 'Level three 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: 'Level one 2',
+        children: [{
+          id: 5,
+          label: 'Level two 2-1'
+        }, {
+          id: 6,
+          label: 'Level two 2-2'
+        }]
+      }, {
+        id: 3,
+        label: 'Level one 3',
+        children: [{
+          id: 7,
+          label: 'Level two 3-1'
+        }, {
+          id: 8,
+          label: 'Level two 3-2'
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  }
+}
+</script>
+