element-ui实现三级或多级导航菜单循环

项目中,菜单导航需要多级循环!

<el-menu router>
    <div v-for="(item,index) in submenuList" :key="index">
    <!-- 一级菜单(没有任何子级菜单)-->
    <el-menu-item :index="item.path" v-if="!item.menuList">{
   
   {item.title}}</el-menu-item>
         <!-- 一级菜单(有子级菜单)-->
         <el-submenu :index="item.path" v-else>
              <template slot="title">{
   
   {item.title}}</template>
                
              <!-- 遍历二级菜单容器 -->
              <div v-for="(i,index) in item.menuList" :key="index">
                  <!-- 判断二级菜单(没有三级菜单)-->
                  <el-menu-item :index="i.path" v-if="!i.list">{
   
   {i.title}}</el-menu-item>
                  
                  <!-- 判断二级菜单(有三级菜单)-->
                  <el-submenu :index="i.path" v-if="i.list">
                    <template slot="title">{
   
   {i.title}}</template>
                    <el-menu-item :index="j.path" v-for="(j,index) in i.list" :key="index">{
   
   {j.title}}       </el-menu-item>
                  </el-submenu>
              </div> 
          </el-submenu>
    </div>
 </el-menu>


submenuList:[
        {
          title:'概况',
          path:'/',
          icon:'el-icon-menu'
        },
        {
          title:'商铺',
          path:'/shop',
          icon:'el-icon-menu',
          menuList:[
            {
              title:'商铺设置',
              path:'/shop/overview',
              list:[
                {
                  title:'商铺分类',
                  path:'/',
                },
                {
                  title:'商铺采集',
                  path:'/',
                }
              ]
            },
            {
              title:'标签设置',
              path:'/shop/labels'
            }
          ]
        },
        {
          title:'订单',
          path:'/order',
          icon:'el-icon-menu',
          menuList:[
            {
              title:'订单设置',
              path:'/order/setting'
            },
            {
              title:'列表',
              path:'/order/group',
              list:[
                {
                  title:'团购分类',
                  path:'/',
                },
                {
                  title:'团购采集',
                  path:'/',
                }
              ]
            }
          ]
        }
      ]

猜你喜欢

转载自blog.csdn.net/weixin_43906597/article/details/112093150