vue导航栏通过接口数据遍历动态生成
要做权限管理,导航栏需要根据不同身份来动态生成,实例如下:<el-menu:default-active="defaultActive"class="el-menu-vertical-demo"routeractive-text-color='#29A88D'...
·
要做权限管理,导航栏需要根据不同身份来动态生成,实例如下:
<el-menu
:default-active="defaultActive"
class="el-menu-vertical-demo"
router
active-text-color='#29A88D'
background-color="#272D34"
text-color="#fff"
@open="handleOpen"
@close="handleClose">
<div v-for="item in routers" :key="item.name">
<el-submenu :index="item.path" v-if="item.key">
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item :index="val.path" v-for="val in item.son" :key="val.name">
<template slot="title">
<i class="icon iconfont">*</i>
<span>{{val.name}}</span>
</template>
</el-menu-item>
</el-submenu>
<el-menu-item :index="item.path" v-else>
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</template>
</el-menu-item>
</div>
</el-menu>
模拟接口数据如下:
[
{
"name": "首页",
"path": "/index/home",
"icon": "icon iconfont icon-home",
"key": false,
"son": []
},
{
"name": "工单管理",
"path": "/index/orders",
"icon": "icon iconfont icon-order",
"key": true,
"son": [
{
"name": "订单审核",
"path": "/index/orders/orderCheck",
"icon": "icon iconfont icon-dui"
},
{
"name": "财务审核",
"path": "/index/orders/finanCheck",
"icon": "icon iconfont icon-dui"
},
{
"name": "全部订单",
"path": "/index/orders/allOrders",
"icon": "icon iconfont icon-dui"
}
]
},
{
"name": "商家管理",
"path": "/index/seller",
"icon": "icon iconfont icon-shangjia",
"key": true,
"son": [
{
"name": "商家列表",
"path": "/index/seller/business",
"icon": "icon iconfont icon-dui"
}
]
},
{
"name": "权限设置",
"path": "/index/power",
"icon": "icon iconfont icon-yuechi",
"key": false,
"son": []
},
{
"name": "财务统计",
"path": "/index/finanCount",
"icon": "icon iconfont icon-caiwu",
"key": false,
"son": []
}
]
更多推荐
已为社区贡献28条内容
所有评论(0)