理论我的项目中，除了根本的树结构，有时还需扩大。如下图层级关系的递归调用，红框中的局部为齐全递归组件。
父级：
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"})如有问题请斧正，如有更简洁的事项形式请留下链接(✿◡‿◡)