通过树节点生成树的组件

src/components/tree-tree/main.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="flex pd-20">
+    <el-card class="box-card flex1">
+      <div slot="header" class="clearfix">
+        <span>{{leftNum}}项</span>
+      </div>
+      <div>
+        <el-scrollbar :style="scrollbarStyle">
+          <el-tree show-checkbox
+            :data="leftTreeData" @check-change="checkChange('leftTree')"
+            :props="defaultProps" :expand-on-click-node="false"
+            highlight-current node-key="id"
+            ref="leftTree" @node-expand="nodeExpand">
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </el-card>
+    <div class="flex flex-d-c flex-center" style="width:50px;">
+      <div><el-button @click="addTree" size="mini" icon="el-icon-arrow-right"></el-button></div>
+      <div><el-button @click="delTree" size="mini" icon="el-icon-arrow-left"></el-button></div>
+      
+    </div>
+    <el-card class="box-card flex1">
+      <div slot="header" class="clearfix">
+        <span>{{rightNum}}项</span>
+      </div>
+      <div>
+        <el-scrollbar :style="scrollbarStyle">
+          <el-tree show-checkbox
+            :data="rightTreeData" @check-change="checkChange('rightTree')"
+            :props="defaultProps" :expand-on-click-node="false"
+            highlight-current node-key="id"
+            ref="rightTree" :default-expanded-keys="rightExpands">
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "treeTree",
+  props: {
+    leftTreeData: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+    scrollbarStyle:{
+      type:String,
+      default:'height:calc(100vh - 400px)'
+    }
+  },
+  computed: {
+    
+  },
+  data(){
+    return{
+      defaultProps: {
+        children: 'children',
+        label: 'title',
+      },
+      leftNum:0,
+      rightTreeData:[],
+      rightNum:0,
+      rightExpands:[],
+    }
+  },
+
+  methods:{
+    addTree(){
+      //console.log(this.$refs.leftTree.getCheckedNodes())
+      let allTree = JSON.parse(JSON.stringify(this.leftTreeData));
+
+      //把半选和选中的数组key合并
+      let keys = this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys());
+      //console.log(keys,'keys');
+      //console.log(allTree,'allTree');
+      this.getRightTree(allTree,keys);
+      this.rightTreeData = allTree;
+    },
+    getRightTree(arr,keys){
+      //对比所有的node和选中的key
+      for (let i = arr.length-1; i >= 0; i--) {
+        let isIn = false;
+        for (let j = keys.length-1; j >= 0; j--) {
+          if(keys[j] == arr[i].id){
+            isIn = true;
+            //已经匹配到的key移除，节省性能
+            keys.splice(j,1);
+            break;
+          }
+        }
+        if(isIn){
+          //包含在选中的节点，如果有childer继续递归判断
+          if(arr[i].children && arr[i].children.length){
+            this.getRightTree(arr[i].children,keys);
+          }
+        }else{
+          //不包含在选中key的node删除
+          arr.splice(i,1);
+        }
+      }
+    },
+    delTree(){
+      let delNodes = this.$refs.rightTree.getCheckedNodes();
+      //只把选中的节点移除
+      delNodes.forEach((node)=>{
+        //console.log(node)
+        this.$refs.rightTree.remove(node);
+        this.$refs.leftTree.setChecked(node.id,false);
+      })
+      this.rightNum = this.$refs.rightTree.getCheckedKeys().length;
+      this.leftNum = this.$refs.leftTree.getCheckedKeys().length;
+    },
+
+    nodeExpand(data){
+      this.rightExpands = this.rightExpands.concat([data.id]);
+    },
+
+    checkChange(treeName){
+      switch (treeName) {
+        case 'leftTree':
+          this.leftNum = this.$refs.leftTree.getCheckedKeys().length;
+          break;
+        case 'rightTree':
+          this.rightNum = this.$refs.rightTree.getCheckedKeys().length;
+          break;
+      }
+    },
+  }
+};
+</script>