vue中使用elementui中的NavMenu使用v-for循环实现
程序员文章站
2022-07-01 18:09:21
...
之前就是直接按照官网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'
}]
}
}
},
上一篇: ResNet解析
下一篇: python 文件I/O
推荐阅读
-
使用vue中的v-for遍历二维数组的方法
-
在vue中,v-for的索引index在html中的使用方法
-
关于Vue中,使用watch同时监听两个值的实现方法
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
Vue学习之路第十四篇:v-for指令中key的使用注意事项
-
vue中通过使用$attrs实现组件之间的数据传递功能
-
使用Vue.js中的过滤器实现幂方求值的方法
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
-
vue使用vant中的checkbox实现全选功能