1. 程式人生 > 其它 >element-ui實現三級或多級導航選單迴圈

element-ui實現三級或多級導航選單迴圈

技術標籤: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:'/',
                }
              ]
            }
          ]
        }
      ]