先看下效果:
在线效果
源代码
用到的技术:
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数据结构为: