话不多说，上代码
<template>
<div>
<div v-for="(item,index) in TreeData" :key="index">
<div style="display:flex;width:637px;align-items:center;margin:0 auto;">
<p v-if="item.childs && item.childs.length > 0" style="margin-right:10px;cursor: pointer;" @click="fold(item)">{{item.static?‘+‘:‘-‘}}</p> //这是展开符号“+”，“-”
<span :style="indent">{{item.activityName}}</span>
<span :style="indent">{{item.activityexplainTitle}}</span> //这三个span是我的数据，可根据自己数据自定
<span :style="indent">{{item.department}}</span>
</div>
<div v-if="item.childs && item.childs.length > 0"> //这里判断递归结束条件v-if
<trees :TreeData="item.childs" :depth="depth + 1" v-if="!item.static"></trees> //depth是为了区分父级和子集，有个段落
</div>
</div>
</div>
</template>
<script>
export default {
props: [‘TreeData‘, ‘depth‘],
name: ‘trees‘,
data() {
return {
showChildren:false,
}
},
computed: {
indent() {
return { marginLeft:`${this.depth * 50}px` } //计算属性，计算父组件传来的depth，递归每层加1后的计算
},
},
methods: {
fold(item){
item.static = !item.static //控制菜单展开，收起的效果
}
},
}
</script>
最后插入调用：