element-plus menu 如何遍历一级和二级菜单

 先看效果，一级标题 有子级，也存在没有子级的一级标签，同时这个没有子级的一级标签也能点击

上代码

<template>
  <el-menu
      active-text-color="black"
      background-color="#a1afc9"
      class="el-menu-vertical-demo"
      text-color="#e3f9fd"
      router
      :default-active="activeIndex"
  >
    // 遍历菜单
    <div v-for="menu in menuList">
      // 判断菜单是否含有子级
      <el-sub-menu v-if="menu.children && menu.children.length>0">
        <template #title>
          <el-icon><svg-icon :icon="menu.icon"/></el-icon>
          <span>{
   
   { menu.name }}</span>
        </template>
    
        <el-menu-item v-for="item in menu.children" :index="item.path" @click="openTabs(item)">
          <el-icon><svg-icon :icon="item.icon"/></el-icon>
          <span>{
   
   { item.name }}</span>
        </el-menu-item>
      </el-sub-menu>

       // 没有子级菜单 
      <el-menu-item :index="menu.path" v-else @click="closemenu">
        <template #title>
          <el-icon><svg-icon :icon="menu.icon"/></el-icon>
          <span>{
   
   { menu.name }}</span>
        </template>
      </el-menu-item>
    </div>
  </el-menu>
</template>