element-plus 的 el-menu 菜单组件，功能非常强大，支持n级菜单、图标等等功能。如果菜单是静态的，直接手撸的话，那么按照官网实例即可，但是如果需要基于json动态绑定，而且还是n级菜单，那么要怎么办呢？
分析菜单
el-menu 由 子菜单、菜单项组成（先不考虑分组的问题），子菜单可以看做是树枝，菜单项可以看做是树叶，子菜单可以包含子菜单和菜单项，菜单项不能包含。
定义结构
// 定义菜单 const myMenu = reactive([ { menuId: '1', text: 'vue', children: [ { menuId: '11', text: '组件1', children: [ { menuId: '111', text: '组件11' } ] } ] }, { menuId: '2', text: 'reacte' } ])
一种常见的分组结构，可以加上icon的信息。
写个递归组件
准备工作完成后，我们写一个递归组件即可
<template v-for="(item, index) in subMenu" > <!--树枝--> <template v-if="item.children"> <el-sub-menu :key="item.menuId + '_' + index" :index="item.menuId" > <template #title> <component :is="" style="width: 1.5em; height: 1.5em; margin-right: 8px;" > </component> <span>{{item.text}}</span> </template> <!--递归子菜单--> <my-sub-menu2 :subMenu="item.children"/> </el-sub-menu> </template> <!--树叶--> <el-menu-item v-else :index="item.menuId" > <template #title> <component :is="" style="width: 1.5em; height: 1.5em; margin-right: 8px;" > </component> <span>{{item.text}}</span> </template> </el-menu-item> </template>
父组件
<el-menu ref="domMenu" class="el-menu-vertical-demo" default-active="1" @select="select" background-color="#6c747c" text-color="#fff" active-text-color="#ffd04b" > <!--递归调用，显示菜单--> <my-sub-menu :subMenu="myMenu"/> </el-menu>
这样就可以实现基于json渲染的n级分组菜单了。
