vue中使用elementui中的NavMenu使用v-for循环实现

本文链接：https://blog.youkuaiyun.com/weixin_43650973/article/details/106018647

本文介绍如何使用Vue.js和Element UI库动态生成具有二级菜单的侧边栏导航。通过组件动态切换，实现根据数据结构自动生成el-menu-item或el-submenu，简化代码结构，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前就是直接按照官网https://element.eleme.io/#/zh-CN/component/menu案例来写，显的代码十分的冗杂，

就想这直接循环实现，不用引用多个el-menu-item,如图：

主要思路是，运用了component动态组件（https://cn.vuejs.org/v2/guide/components-dynamic-async.html）来根据是否有二级菜单来判断，如果有改动态组件就使用is切换成el-submenu，否则切换成el-menu-item，核心代如下：

<component class="menu-item"
              :is="(item.children&&item.children.length>0)?'el-submenu':'el-menu-item'" :index="item.url">
    
    xxxxxxxx

</component>

具体代码如下

<el-container class="container">
        <el-aside width="200px">
          <el-menu v-for="(item,index) in leftMenu.navList" :key="index" unique-opened router :default-active="$route.path">
            <component class="menu-item"
              :is="(item.children&&item.children.length>0)?'el-submenu':'el-menu-item'" :index="item.url">
              <template slot="title">
                <i :class="[item.icon]"></i>
                <span>{{item.title}}</span>
              </template>
              <template v-if="item.children&&item.children.length>0">
                <el-menu-item class="menu-item" v-for="(v,i) in item.children" :key="v.url+i" :index="v.url">
                  <i :class="[v.icon]"></i>
                  <span slot="title">{{v.title}}</span>
                </el-menu-item>
              </template>
            </component>
          </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
 </el-container>

 export default {
    data() {
      return {
        leftMenu: {
          isCollapse: false,
          navList: [{
            icon: 'el-icon-document',
            title: '订单管理',
            url: '/OrderManage'
          }, {
            icon: 'el-icon-dish',
            title: '菜单管理',
            url: '/ProductManage'
          }, {
            icon: 'el-icon-suitcase',
            title: '店铺管理',
            url: 'suibianxie',
            children: [{
              icon: 'el-icon-tickets',
              title: '店铺资料',
              url: '/StoreProfile'
            }, {
              icon: 'el-icon-picture-outline',
              title: '轮播图管理',
              url: '/BannerPicture'
            }, {
              icon: 'el-icon-s-grid',
              title: '桌台管理',
              url: '/TableManage'
            }]
          }, {
            icon: 'el-icon-setting',
            title: '账号管理',
            url: '/AccountManage'
          }, {
            icon: 'el-icon-user',
            title: '个人资料',
            url: '/PersonProfile'
          }]
        }
      }
    },