vue 结合ztree编写组件

哎 yo 这不是来自红人馆~

vue结合ztree插件编写的选人组件

1. 需求描述

正如下图所示甲方爸爸要求的选人组件做成这样，开始使用的iview的选人组件，我还改造了下，这下推翻重新来过。

2. 实现思路

使用的ztree插件，再结合自己的拼凑，编写而成组件。

3.具体实现

3.1 引入ztree

• 先去官网（http://www.treejs.cn/v3/api.php）下载ztree包，里面有一些demo，找到plugins复制到项目中。
  
• main.js中引入

import "./plugins/jquery-1.4.4.min.js"
import "./plugins/jquery.ztree.core.min.js"
import "./plugins/jquery.ztree.excheck.min.js"
import "./plugins/zTreeStyle.css"

• 编码中向上 向下 删除、按住shift多选的方法

	down(i){
        if(this.selNodes.length -1 > i){
         let temp = this.selNodes[i]
         this.$set(this.selNodes,i,this.selNodes[i+1])
         this.$set(this.selNodes,i+1,temp)
        }
    },
    up(i){
        if(i > 0){
         let temp = this.selNodes[i]
         this.$set(this.selNodes,i,this.selNodes[i-1])
         this.$set(this.selNodes,i-1,temp)
        }
    },
    deleteItem(index){
        this.selNodes.splice(index, 1);
    },
    chooseNode(event,treeId, treeNode, clickFlag){
        var preClickedNode = window.preClickedNode;  //获得最后一次点击的节点
         window.preClickedNode=treeNode;  //设置上次点击节点为刚刚点击的节点
         event = window.event||event;//兼容IE  
         if(event.shiftKey&&preClickedNode){//当有是第二次点击并且按住shift键的时候
          var obj = $.fn.zTree.getZTreeObj(treeId);  //获得树
          obj.selectNode(preClickedNode,true);  //把上次获得的节点设置为选中
          var firstNode =obj.getNodeIndex(preClickedNode);  //第一个节点
          var lastNode =obj.getNodeIndex(treeNode);  //最后一个节点
          var count = lastNode - firstNode;  //差
          var nodeNew = preClickedNode;  
          if (count > 0) { 
              for (var i = 1; i < count; i++){  
                  nodeNew = nodeNew.getNextNode();  
                  // if(!nodeNew)break;//用于排除隐患  
                  obj.selectNode(nodeNew, true); //选中每一个节点
              }  
          }else {  
              for (var j = 1; j < (-count); j++) {  
                  nodeNew = nodeNew.getPreNode();  
                  // if(!nodeNew)break;//用于排除隐患  
                  obj.selectNode(nodeNew, true); //选中每一个节点
              }  
          } 
        }
    },

4. 遇到问题

引入ztree 初始化时候，报找不到jquery的错误，安装了jquery也不好使，这里面直接引用的jquery js文件。