vue-树组件

话不多说，直接上代码
tree.vue:

<template>
<ul class="tree__ul">
    <treeItem
            v-for="(treeData,index) in treeDatas"
            :treeData="treeData"
            :key="index"
            @nodeItemClick="nodeClick"
            :options="options"
            :level="1"></treeItem>
</ul>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    props:{
        treeDatas:Array,
        options:Object,
    },
    methods:{
        nodeClick(value){
            if(this._events["nodeClick"]){
                this.$emit('nodeClick', value)
            }
        },
        getSelectNode(){
            let nodes=[];
            nodes=this.getChildrenSelect(this.treeDatas);
            return nodes;
        },
        getChildrenSelect(children){
            let nodes=[];
            children.forEach((item,index)=>{
                if(item.children&&item.children.length){
                    let childNodes=this.getChildrenSelect(item.children);
                    childNodes.forEach((childItem,childIndex)=>{
                        nodes.push(childItem);
                    })
                }else if(item.checked){
                    nodes.push(item);
                }
            });
            return nodes;
        }
    },
    components:{
        treeItem:{
            name:"treeItem",
            data(){
                return{
                    isOpen:false,
                    isUnAllCheck:false
                }
            },
            props:{
                treeData:Object,
                options:Object,
                level:Number,
            },
            computed:{
                isFolder(){
                    return this.treeData.children&&this.treeData.children.length;
                }

            },
            created(){
                //默认全选
                if(this.options.isSelected){
                    this.treeData.checked=true;
                }
            },
            mounted(){
                this.isOpen=this.options.expandNum>=this.level;
            },
            methods:{
                changeType(){
                    if(this.isFolder){
                        this.isOpen=!this.isOpen;
                        //异步树展开节点的时候调用回调
                        if(this.isOpen&&this._events["expandNode"]){
                            this.$emit('expandNode', this.treeData)
                        }
                    }
                },
                nodeClick(value,level){
                    if(level){
                        this.currentNodeClick();
                    }else{
                        this.parentNodeState();
                    }

                    //是否有回调函数
                    if(this._events["nodeItemClick"]){
                        this.$emit('nodeItemClick', value)
                    }
                },
                currentNodeClick(){
                    this.isUnAllCheck=false;
                    this.treeData.checked=!this.treeData.checked;
                    let state=this.treeData.checked;
                    if(this.treeData.children&&this.treeData.children){
                        this.childStateChange(this.treeData.children,state);
                    }

                },
                childStateChange(children,state){
                    if(children&&children.length){
                        children.forEach((item,index)=>{
                            item.checked=state;
                            if(item.children&&item.children){
                                this.childStateChange(item.children,state);
                            }
                        });
                    }
                },
                parentNodeState(){
                    let state=this.getChildrenState(this.treeData.children);
                    if(state===null){
                        this.isUnAllCheck=true;
                    }else{
                        this.isUnAllCheck=false;
                        this.treeData.checked=state;
                    }
                },
                getChildrenState(children){
                    var state=false;
                    if(children&&children.length>0){
                        for(let i=0;i<children.length;i++){
                            let item=children[i];
                            //子节点没有选全
                            if(state!=item.checked&&i>0){
                                return null;
                            }
                            state=item.checked;
                            if(item.children&&item.children.length){
                                let childState=this.getChildrenState(item.children);
                                //子节点没有选全
                                if(childState==null||state!=childState)
                                    return null;
                            }
                        }
                    }
                    return state;
                }
            },
            template:`<li class="tree__li">
        <div :class="['tree__item--arrow',isOpen?'tree__item--arrow-down':'']" @click="changeType" v-if="isFolder"><i></i></div>
        <div class="tree__item" @click="nodeClick(treeData,level)">
            <span :class="['tree-icon', isFolder&&isOpen?'tree-folder_open':isFolder?'tree-folder':'tree-file']" v-if="options.hasicon"></span>
            <span :class="['tree-checkbox', isUnAllCheck?'tree-checkbox_unallchecked':treeData.checked?'tree-checkbox_checked':'tree-checkbox_unchecked']"></span>
            <span class="tree-text" >{{treeData.name}}</span>
            <span title="删除" class="glyphicon glyphicon-remove tree-delete" v-if="treeData.candelete">x</span>

        </div>
        <ul class="tree__ul" v-show="isOpen" v-if="isFolder">
            <treeItem v-for="(item,index) in treeData.children"
                  :treeData="item"
                  :key="index"
                  :options="options"
                  :level="level+1"
                  @nodeItemClick="nodeClick"
                  ></treeItem>
        </ul>
    </li>`
        }
    }
}
</script>

css：

body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
 .header{
  height: 50px;
  border-bottom: 1px solid hsla(0,0%,100%,.15);
  background-color: #373d41;
}
.body{
  position: absolute;
  top:50px;
  left: 220px;
  right:0;
  bottom: 0;
  background-color: #fff;
}
.menu{
  position: absolute;
  top:50px;
  left: 0;
  bottom: 0;
  width: 220px;
}

.tree{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
.tree__ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree__li{
  position: relative;
  padding-left: 12px;

}
.tree__item{
  margin: 0;
  padding: 2px 12px 2px 6px;
  line-height: 20px;
  font-size: 12px;
  color: #222;
  background-color: transparent;
  cursor: pointer;
}
.tree__item:hover{
  background-color: #F0F8FD;
}
.tree__item_selected{
  background-color: #F0F8FD;
}
.tree__item--arrow{
  display: inline-block;
  position: absolute;
  top: 0;
  left: 2px;
  width: 12px;
  height: 24px;
  overflow: hidden;
  cursor: pointer;
}
.tree__item--arrow i{
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 4px;
  border-width: 5px;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #222;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.tree__item--arrow:hover i{
  border-color: transparent transparent transparent #999;
}

.tree__item--arrow-down{

}
.tree__item--arrow-down i{
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0px;
  border-width: 5px;
  border-style: solid dashed dashed dashed;
  border-color: #222 transparent transparent transparent;
  font-size: 0;
  line-height: 0;
}
.tree__item--arrow-down:hover i{
  border-color: #999 transparent transparent transparent;
}
.tree__item--arrow + .tree__ul{
  display: none;
}
.tree__item--arrow-down + .tree__ul{
  display: block;
}
/*树样式*/
.tree-icon,.tree-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: top;
  overflow: hidden;
}
.tree-icon{
  background-image: url('../img/treeicon.png');

}
.tree-folder {
  background-position: 52px -3px;
}
.tree-folder_open {
  background-position: 52px 47px;
}
.tree-file {
  background-position: 52px 21px;
}
.tree-checkbox {
  background-image: url('../img/treeicon.png');
}
.tree-checkbox_checked {
  background-position: 25px 47px;
}
.tree-checkbox_unchecked {
  background-position: 25px -2px;
}
.tree-checkbox_unallchecked {
  background-position: 25px 22px;
}

.tree-text {
  display: inline-block;
  vertical-align: top;
}

.tree-delete {
  padding-left: 10px;
  color: red;
}

样式图标：

treeicon.png

调用：

<tree
                    ref="testTree"
                    :treeDatas="treeDatas"
                    @nodeClick="nodeClick"
                    @expandNode="expandClick"
                    :options="options"></tree>

数据格式：

var options = {
        expandNum: 4,
        isAllexpand: true,
        hascheckbox: true,
        hasicon: true,
        folderClass: "",
        folderopenClass: "",
        fileClass: "",
        candelete: true,
        checkedCallback: false,
        removeCallback: false,
        checkedSelectChild: true,
    };
    var treeDatas = [{
        "id": 4,
        "value": "省XX",
        "name": "省XX",
        "checked": false,
        "children": [{"id": 1026, "value": "chenXX", "name": "陈XX","checked": false}, {
            "id": 2427,
            "value": "zhuangXX",
            "name": "庄XX", "checked": false
        }, {"id": 100730, "value": "dwliuXX", "name": "刘XX", "checked": false}, {
            "id": 100906,
            "value": "linXX",
            "name": "林XX", "checked": true
        }, {"id": 212, "value": "zhangXX", "name": "张XX", "checked": false}, {
            "id": 214,
            "value": "wangXX",
            "name": "王XX", "checked": false
        }, {"id": 236, "value": "huangXX", "name": "黄XX", "checked": false}, {
            "id": 265,
            "value": "caihouen",
            "name": "蔡XX", "checked": false,
            "children":[{"id": 1026, "value": "chenXX", "name": "陈XX", "checked": true}, {
                "id": 212,
                "value": "zhangXX",
                "name": "张XX","checked": true
            }, {"id": 531, "value": "liuXX", "name": "刘XX", "checked": true}, {
                "id": 4477,
                "value": "liXX",
                "name": "李XX",
                "checked": true
            }]
        }]
    }, {
        "id": 55,
        "value": "省XX分析组",
        "name": "省XX分析组",
        "checked": true,
        "children": [
            {"id": 1026, "value": "chenXX", "name": "陈XX", "checked": true}, {
                "id": 212,
                "value": "zhangXX",
                "name": "张XX","checked": true
            }, {"id": 531, "value": "liuXX", "name": "刘XX", "checked": true}, {
                "id": 4477,
                "value": "liXX",
                "name": "李XX",
                "checked": true
            }]
    }];

获取树数据的方法：

           //数结构的回调
            nodeClick(value) {
                console.log(value);
            },
            expandClick(value){
                console.log(value);
            },
            getSelectNode(){
                let nodes=this.$refs.testTree.getSelectNode();
                console.log(nodes);
             }

以上，一个功能还不够完善的树组件（一直没时间完善功能）