权限: 根据不同的用户组, 来展示不同的功能(动态树菜单)
核心: 判断用户组, 对界面树菜单选项卡进行增删
页面结构
<div v-for="item in powerarr" :key="item.url">
<el-menu-item :index="item.url" v-if="!item.children">
<i :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
<el-submenu :index="item.url" v-else>
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item v-for="item1 in item.children"
:key="item1.url" :index="item1.url">{{item1.name}}</el-menu-item>
</el-submenu>
</div>
行为交互
data() {
return {
username: "", //用户名
//动态菜单
list: [
{
url: "/main/index",
icon: "el-icon-message-solid",
name: "后台首页",
roles: ["super", "normal"]
},
{
url: "/main/additem",
icon: "el-icon-s-promotion",
name: "订单管理",
roles: ["super", "normal"]
},
{
url: "/main/items",
icon: "el-icon-shopping-bag-1",
name: "商品管理",
children: [
{ url: "/main/itemslist", name: "商品列表" },
{ url: "/main/itemadd", name: "添加商品" },
{ url: "/main/itemsort", name: "商品分类" }
],
roles: ["super", "normal"]
},
{
url: "/main/shops",
icon: "el-icon-s-shop",
name: "店铺管理",
roles: ["super"]
},
{
url: "/main/users",
icon: "el-icon-user",
name: "账号管理",
children: [
{ url: "/main/userslist", name: "用户列表" },
{ url: "/main/usersadd", name: "添加用户" },
{ url: "/main/userssort", name: "修改用户" }
],
roles: ["super"]
},
{
url: "/main/total",
icon: "el-icon-s-data",
name: "销售统计",
children: [
{ url: "/main/saletotal", name: "销售统计" },
{ url: "/main/ordertotal", name: "订单统计" }
],
roles: ["super"]
}
]
};
},
computed: {
powerarr() {
//根据权限返回运算完毕的数组
//filter() 过滤函数
let newarr = this.list.filter(item => {
//返回包含此用户权限的数据
return item.roles.includes(localStorage.role);
});
return newarr;
}
},
效果展示