理论我的项目中，除了根本的树结构，有时还需扩大。如下图层级关系的递归调用，红框中的局部为齐全递归组件。
父级：
template
<div class="dept-tree-show">
<div class="teer-deep">
<div class="per-teer first-teer clearfix">
<template v-for="(item) in deptlist">
<div class="pt-item ft-item"
:key="item.id"
v-if="item.treeType==activedepttree.code"
:class="{'disactive': teer2,'active': (teer2&&teer2.code==item.code)
}"@click.stop="openChildren(item)">
<div class="top-title">{{item.name.slice(0,2)}}</div>
<div class="total-more" title="人员列表"
@click.stop="showRelatedUsers(item)">
<i :class="item.userloading?'el-icon-loading':'fa fa-users'"></i>
</div>
<div class="total-title">{{item.name}}</div>
<!-- <div class="total-code">{{item.code}}</div> -->
<div class="total-children" @click.stop="openChildren(item)">
{{(item.children&&item.children.length)?item.children.length:0}}
<i :class="(teer2&&teer2.code==item.code)?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
</div>
</div>
</template>
</div>
<secondtree
v-if="teer2"
:openitem="teer2"
@closetopChildren="closetopChildren"
@showRelatedUsers="showRelatedUsers"></secondtree>
</div>
</div>js:
//.... 不残缺代码
import secondtree from './dept/childrenteer.vue'
//.... 不残缺代码
components:{secondtree}
//.... 不残缺代码 子级：
<template>
<div class="wrap-wrap">
<div class="children-teer-wrap" @click.stop v-if="opendata">
<div class="breaker" :id="opendata.id">
<div class="line">
<div class="line-left"></div>
<div class="line-right"></div>
</div>
<div class="baseinfo">
<div class="l-title">{{opendata.name}}</div>
<div class="l-close" @click.stop="closeChildren(opendata)"> 收起 </div>
</div>
</div>
<div class="per-teer children-teer clearfix">
<template v-for="(item) in opendata.children">
<div
class="pt-item ct-item"
:key="item.id"
@click.stop="openChildren(item)"
:class="{'disactive': treedata,'active': (treedata&&treedata.code==item.code)
}">
<div class="top-title">{{item.name.slice(0,2)}}</div>
<div class="total-title">{{item.name}}</div>
<div class="total-more" title="人员列表" @click.stop="showRelatedUsers(item)"><i :class="item.userloading?'el-icon-loading':'fa fa-users'"></i></div>
<!-- <div class="total-code">{{item.code}}</div> -->
<div class="total-children"
@click.stop="openChildren(item)">
{{(item.children&&item.children.length)?item.children.length:0}}
<i :class="(treedata&&treedata.code==item.code)?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
</div>
</div>
</template>
</div>
</div>
<childrentree v-if="treedata" :openitem="treedata" @unActiveParent="unActiveParent" @closeChildren="closeChildren" @showRelatedUsers="showRelatedUsers"></childrentree>
</div>
</template>
<script>
export default {
name:"childrentree",
props:{
openitem:{
type: Object,
default: () => {},
}
},
watch:{openitem(val){
this.opendata=val;
this.treedata=""
}
},
data(){
return{
opendata:this.openitem,
treedata:""
}
},
methods: {openChildren(data){if(this.treedata && this.treedata.code && data&& data.code && this.treedata.code==data.code){this.treedata="";}else{if(data&&data.children && data.children.length){
this.treedata=data;
this.$nextTick(()=>{document.getElementById(data.id).scrollIntoView({behavior: "smooth"})
})
//
}
}
},
unActiveParent(){this.treedata="";},
closeChildren(data){
this.opendata="";
this.$emit('unActiveParent');
this.$emit('closetopChildren');
},
showRelatedUsers(data){this.$emit("showRelatedUsers",data)
}
},
}
</script> 一些重要的废话放到最初：
1：子组件，即须要递归应用的组件，在 js 中是要申明 name(name:”childrentree”)。这样子组件在自身就能够间接应用自身。
2：本例从第二层节点才开始应用递归，所以写发有冗余，可按需精简
3：子组件的事件须要按需辨别是要发动仅紧挨着的下层事件（this.$emit(‘unActiveParent’);）还是顶层事件（this.$emit(‘closetopChildren’);）。能够通过承受的办法名进行辨别
4：开展某一节点后，节点子集的顶部，即大括号顶部的话，能够应用：(依据具体场景自行判断是否须要应用 $nextTick)
document.getElementById(data.id).scrollIntoView({behavior: "smooth"})如有问题请斧正，如有更简洁的事项形式请留下链接 (✿◡‿◡)