添加树型结构的细节问题

src/views/system/role.vue

 <template>
-    <div class="create-item">
-        <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
-        角色管理
+  <div>
+    <el-tree
+      :data="data2"
+      show-checkbox
+      default-expand-all
+      node-key="id"
+      ref="tree"
+      highlight-current
+      :props="defaultProps"
+      @check="onChecked"
+    ></el-tree>
+    <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 BreadCrumb from '../../components/breadcrumb.vue'
+import { ELTree1 } from "element-ui/lib/checkbox";
+// import Vue from 'vue'
+
+// require("element-ui/lib/checkbox"
 export default {
-    components: {
-      BreadCrumb
+  // 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());
     },
-    data() {
-        return {
-            curmbFirst: '系统管理',
-            curmbSecond: '角色管理'
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys());
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: "二级 2-1"
+        },
+        {
+          id: 9,
+          label: "三级 1-1-1"
         }
-    }
-}
-</script>
-<style>
+      ]);
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3]);
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([]);
+    },
 
-</style>
+    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(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