欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-01 18:09:21
...

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

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

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

主要思路是,运用了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'
          }]
        }
      }
    },

 

相关标签: vue

上一篇: ResNet解析

下一篇: python 文件I/O