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级分组菜单了。