前段时间有个需求，外表长得像select下拉框，实际上却是个多级菜单。其实以前一直有想过怎么根据数据动态的生成多级menu菜单，但一直没去实践，刚好这个需求给了我这个机会去实现，那么开始吧。
需求的最终效果图
Element-ui官方写法
那么为了能够通过递归去动态的生成多级菜单，我们先来看一下element-ui本身的menu是怎么写的。
<el-submenu></el-submenu>标签，所以这个menu是一个三级菜单，下面这张图就是对应的menu
选项五 ，这个选项对应的代码是 <el-menu-item>选项五</el-menu-item> ，并且跟 选项6 这个三级菜单是同一级的。那么在实际的开发过程中，肯定是存在有的选项没有下一级菜单，而有的选项有下一级菜单，所以我们需要考虑有跟没有下一级菜单这种情况。基于这点，我们才能够根据递归，去动态的生成多级menu菜单。
需求源代码展示
核心是一级菜单下是否存在二级或者三级甚至更多层级的菜单, 为了实现动态, 必须将一级菜单下的menu写成组件的形式
上图里的 <multi-menu></multi-menu> 组件就是用来实现递归的menu组件, 为了能够更清晰的了解代码的结构，下面我给出后端返回的数据结构是长啥样的。
后端返回的数据结构
注意到三个箭头所对应的三个红框，以及箭头指向的 children ，通过观察可以发现, 当children这个数组保存的是子菜单的内容，第一个children不为空，所以我们可以看到红框会有一个箭头，而最后一个children是一个空数组，意味着这个选项是单独的，不存在下一级子菜单，所以对应的红框就没有箭头了。所以整个结构说清楚后，我们可以来看这个menu的递归组件是如何实现的了。
<multi-menu></multi-menu>组件的实现代码
item.children加了红框，这里的children就是我上面说的后端返回的数据里面的children。
除此之外，我还标注了 v-if和v-else ，如果小伙伴们仔细看的话，应该记得我在上面说过，有的选项会有下一级菜单，而有的选项是没有下一级菜单的，因此我们必须做一个判断来区分该选项是否存在下一级菜单，所以这里采用了 v-if跟v-else。 并且可以看到，v-if对应的是有下一级菜单的情况， v-else对应的是没有下一级菜单的情况。没有下一级菜单的选项比较好理解，这里就不做解释，主要看一下当存在下一级菜单的时候都做了什么事
可以看到，当选项有children并且该children不为空的时候, 递归调用了 <multi-menu></multi-menu> 这个组件，而且 <multi-menu></multi-menu> 是被包在 <el-submenu></el-submenu> 下的，所以能够实现下一级菜单，直到下一级菜单的某个选项的children为空，那么才走 v-else, 此时渲染的是 <el-menu-item></el-menu-item 这个标签只是一个选项，并不是菜单，所以就不会继续往下递归了。
最后
对各位小伙伴有用就是我最大的创作动力，谢谢。
