添加树型结构细节

src/router/router.js

@@ -8,6 +8,7 @@ const createComponent = r => require.ensure([], () => r(require('../views/educat
 const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
 const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
 const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
+const tree = r => require.ensure([], () => r(require('../views/education/tree.vue')), 'tree')
 
 export default [{
     path: '/',
@@ -43,6 +44,9 @@ export default [{
         },{
             path: '/item-role',
             component: itemRole
+        },{
+            path: '/tree',
+            component: tree
         },
     ]
 }]
\ No newline at end of file

src/views/education/item-manager.vue

@@ -306,7 +306,7 @@ export default {
             message: "ID为：" + row.id + "的项目删除成功"
           });
           this.loading = true;
-          that.getProjectList();
+          vm.getProjectList();
         }
       });
     },

src/views/education/tree.vue

+<template>
+  <div>
+    <el-tree
+      :data="data2"
+      show-checkbox
+      default-expand-all
+      node-key="id"
+      ref="tree"
+      highlight-current
+      :props="defaultProps"
+      @check="onChecked"
+    ></el-tree>
+
+    <!-- <base1
+      :data="data2"
+      show-checkbox
+      default-expand-all
+      node-key="id"
+      ref="tree"
+      highlight-current
+      :props="defaultProps"
+    ></base1>-->
+    <span></span>
+    <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { ELTree1 } from "element-ui/lib/checkbox";
+// import Vue from 'vue'
+
+// require("element-ui/lib/checkbox"
+export default {
+  // components: {
+  //   base1
+  // },
+  mounted() {
+    // const base1 = Vue.extend(ELTree)
+    // Vue.component('base1', base1)
+  },
+  data() {
+    return {
+      data2: [
+        {
+          id: 11,
+          label: "一级 1",
+          children: [
+            {
+              id: 1,
+              label: "一级 1",
+              children: [
+                {
+                  id: 4,
+                  label: "二级 1-1",
+                  children: [
+                    {
+                      id: 9,
+                      label: "三级 1-1-1"
+                    },
+                    {
+                      id: 10,
+                      label: "三级 1-1-2"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 2,
+              label: "一级 2",
+              children: [
+                {
+                  id: 5,
+                  label: "二级 2-1"
+                },
+                {
+                  id: 6,
+                  label: "二级 2-2"
+                }
+              ]
+            },
+            {
+              id: 3,
+              label: "一级 3",
+              children: [
+                {
+                  id: 7,
+                  label: "二级 3-1"
+                },
+                {
+                  id: 8,
+                  label: "二级 3-2"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      }
+    };
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes());
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys());
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: "二级 2-1"
+        },
+        {
+          id: 9,
+          label: "三级 1-1-1"
+        }
+      ]);
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3]);
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([]);
+    },
+
+    onChecked() {
+      let cData = [],
+        oldData = (this.data2.length && this.data2.slice()) || [],
+        checkedKeys = this.$refs.tree.getCheckedKeys(),
+        halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),
+        savedCheckedKeys = this.handlerCheckedData(oldData, checkedKeys).map(
+          key => {
+            return { type: 2, key: key };
+          }
+        ),
+        savedHalfCheckedKeys = halfCheckedKeys.map(key => {
+          return { type: 1, key: key };
+        }),
+        allSelectedKeys = savedCheckedKeys.concat(savedHalfCheckedKeys);
+      console.log("treeData", this.data2);
+      console.log(allSelectedKeys);
+    },
+    // 递归删除列表中所有子节点
+    delSubKeysByNode(node, checkedKeys) {
+      let idIndex;
+      if (node.children && node.children.length) {
+        if (node.children && node.children.length) {
+          node.children.forEach(elm => {
+            idIndex = checkedKeys.findIndex(id => {
+              return id === elm.id;
+            });
+            if (idIndex > -1) {
+              checkedKeys.splice(idIndex, 1);
+            }
+            if (elm.children && elm.children.length) {
+              this.delSubKeysByNode(elm, checkedKeys);
+            }
+          });
+        }
+      }
+    },
+
+    // 去除子节点
+    handlerCheckedData(oldData, checkedKeys) {
+      oldData.forEach(element => {
+        for (let i = 0; i < checkedKeys.length; i++) {
+          // 如果此节点被选中，则删除所有子节点
+          if (element.id === checkedKeys[i]) {
+            this.delSubKeysByNode(element, checkedKeys);
+          } else {
+            if (element.children && element.children.length) {
+              this.handlerCheckedData(element.children, checkedKeys);
+            }
+          }
+        }
+      });
+      return checkedKeys;
+    }
+  }
+};
+</script>
\ No newline at end of file

src/views/layout/slidebar.vue

@@ -56,6 +56,11 @@ export default {
                             title: '项目管理',
                             icon: 'el-icon-setting',
                             index: 'item-manager'
+                        },
+                        {
+                            title: '树',
+                            icon: 'el-icon-setting',
+                            index: 'tree'
                         }
                     ]
                 },{

src/views/mock.js

@@ -48,10 +48,12 @@ let treeData = [
         id: 11,
         name: "一级 1",
         label: "一级 1",
+        isLeaf: "true",
         children: [
             {
                 id: 1,
                 label: "一级 1",
+                isLeaf: "true",
                 children: [
                     {
                         id: 4,
@@ -75,14 +77,21 @@ let treeData = [
                 children: [
                     {
                         id: 5,
-                        label: "二级 2-1"
+                        label: "二级 2-1",
+                        children: [],
                     },
                     {
                         id: 6,
-                        label: "二级 2-2"
+                        label: "二级 2-2",
+                        isLeaf: false,
                     }
                 ]
             },
+            {
+                id: 4,
+                label: "一级 4",
+                isLeaf: false,
+            },
             {
                 id: 3,
                 label: "一级 3",