开局一个参考文章：用Vue.js递归组件构建一个可折叠的树形菜单
虽然写得不是特别通俗易懂，但是看完我就写出来了！（感恩
一、场景
如果我们需要些一个根据所传数据动态生成的下拉列表，这是一个树状的结构，并且深度未知，那么肯定是不可写死的，我们需要动态地去递归生成一整个解构，毕竟每次深度都不一样。
二、分析
数据格式
首先我们来看看我们可以得到的数据，比如它是下面这个样子的：
let memus = {
index: number
icon: string
title: string
children: {
index: number
icon: string
title: string
children:{
.....
}
}
}
其中 children 是可以无限的。
递归条件
我们应该想到，在这里我们应该递归地去调用组件本身，只要还有 children，我们就把 children 当做一个新的数据传递给组件。那么结束的条件是什么呢？自然就是当前的 children 已经没有 children 了，所以我们可以用 v-if来进行判断，当然还有一种更聪明的做法，就是使用v-for遍历当前 children 的所有 children，下一个又继续这样去遍历，一层层，直到 children 没有 children 自动停止。
UI 优化
由于我们生成的是一个层级关系，合适的缩进可以使得呈现出来的数据可读性更强。这里直接贴一个参考文章中的代码吧，觉得很棒
1) <my-menu :data="item.children" :depth="depth + 1"></my-menu>
2)
3) <span slot="title" :style="indent" style="display: inline-block">{{item.title}}</span>
4)
5) computed: {
6) indent() {
7) return { transform: `translate(${this.depth * 20}px)` }
8) }
9) }
就是利用一个 depth ，并且在递归的过程中使得它自增，用这个数去控制当前行的缩进距离。十分聪明了！（仰慕
现在被我学来了哈哈哈哈哈哈哈哈
三、代码
贴一个我的代码
组件：
<template>
<div>
<el-submenu
v-for="item of data"
:key="item.index"
:index="item.index"
style="height: 100%"
class="submenu"
v-if="item.children">
<template slot="title">
<i v-if="item.icon" class="iconfont page-icon" v-html="item.icon"></i>
<span slot="title" :style="indent" style="display: inline-block">{{item.title}}</span>
</template>
<my-menu :data="item.children" :depth="depth + 1"></my-menu>
<div v-for="subItem of item.children" class="link item-group"
:key="subItem.index">
<router-link :to="subItem.path" v-if="subItem.path">
<el-menu-item :index="subItem.index">
<span class="link-text" :style="indent">{{subItem.title}}</span>
</el-menu-item>
</router-link>
</div>
</el-submenu>
</div>
</template>
调用：
<my-menu :data="menus" :depth="0"></my-menu>
