先看下效果：

在线效果
源代码
用到的技术：
1，vue组件，组件事件传递
2，递归

代码：
组件：

<script type="text/x-template" id="item-template">
    <li class="item">
        <div class="bold" :class="{'item-active':itemData.active}">
            <div class="mode" :style="pleft">
                <span class="f-caret fa"
                      :class="{'fa-caret-right':!itemData.toggleOpen && itemData.child, 'fa-caret-down':itemData.toggleOpen && itemData.child}"
                      @click.self.prevent="changeToggleOpen()"></span>
                <span class="item-name" @click="changeActive(itemData)">
                    <i class="fa fa-folder folder"></i>
                    {{ itemData.department_name }}
                </span>
            </div>
            <div class="ul-parent">
                <span><i class="fa fa-align-justify"></i></span>
                <ul class="anddelete" :did="itemData.id">
                    <li data-tp="1">添加部门</li>
                    <li data-tp="2">重命名</li>
                    <li data-tp="3">删除</li>
                </ul>
            </div>
        </div>
        <ul v-if="itemData.child" v-show="itemData.toggleOpen">
            <item-li v-for="item in itemData.child" :item-data="item" @change-active="changeActive($event)"></item-li>
        </ul>
    </li>
</script>

Vue.component('item-li', {
    template: '#item-template',
    props: ['itemData'],
    data: function() {
        return {
            pleft: "padding-left:0px;",
        }
    },
    methods: {
        countPleft() {
            var num = $(this.$el).parents(".item").length;
            this.pleft = "padding-left:"+ num*10 +"px;";
        },
        changeToggleOpen() {
            this.itemData.toggleOpen = !this.itemData.toggleOpen;
        },
        changeActive(d) {
            this.$emit('change-active', d);
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.countPleft();
        });
    },
})

调用方法：

<ul class="tree-list">
	<item-li v-for="item in dlist" :item-data="item" @change-active="changeActive"></item-li>
</ul>

vue的methods的必须方法：

data: {
    dlist: [],
    departmentId: "",
},
methods: {
	// 这个方法传入对象，比如开始默认选中第一个，d 为 dlist[0]，具体的这部分代码可以查看在线效果地址的源码。
	changeActive(d) {
	    if (d.active) return;
	    this.departmentId = d.id;
	    this.resetActive(this.dlist);
	    d.active = true;
	},
	resetActive(tlist) {
	    var _self = this;
	    tlist.forEach(function(v,i) {
	        v.active = false;
	        if (v.child) {
	            _self.resetActive(v.child);
	        }
	    });
	},
}

dlist数据结构为：