<el-row style="min-height:50vh;">
<el-col>
<el-menu
v-for="(item,index) in $store.state.menuList"
:key="index"
:index="String(index)"
:default-active="$route.path"
background-color="#304156"
text-color="#fff"
collapse-transition
>
<!-- 没有子菜单 -->
<el-menu-item
v-if="item.childList.length < 1 "
@click.native="routeTo(item.modelAction)"
:index="String(index)"
>
<span slot="title">{{item.permissionName}}</span>
</el-menu-item>
<!--有子菜单 -->
<el-submenu :index="String(index)" v-else>
<template slot="title">
<span>{{item.permissionName}}</span>
</template>
<label>
<el-tree
:data="item.childList"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</label>
</el-submenu>
</el-menu>
</el-col>
</el-row>
在methods中：
//递归筛选菜单
me_getlistMenu() {
//获取菜单列表
const config = {
roleId: 0,
};
this.$store
.dispatch("getMenuList", { config }) //获取菜单列表
.then((content) => {
var content = JSON.parse(JSON.stringify(content));
this.$store.dispatch("updateMenuList", content); //过滤菜单
})
.catch((err) => {
this.$message.error(err);
});
},
//关于路由跳转
handleNodeClick(data) {
if (data.childList.length === 0) {
this.$router.push({ name: String(data.modelAction) });
}
},
routeTo(path) {
this.$router.push({ name: String(path) });
},
使用了vuex保存数据和方法
在action.js中：
updateMenuList(context, payload) {//过滤菜单
// console.log(payload)
function filterMenu(payload) {
//判斷是不是菜單
new Promise((resolve, reject) => {
const menu = payload.filter((item) => {
return item.menuFlag; //menuFlag为true表示是菜单 需要展示出来
});
resolve(menu);
}).then((res) => {
//已得到一级父级中是菜单的数据
//现在过滤子菜单 将不是菜单的子级删除 使用递归
const get = function (list) {
return new Promise((resolve, reject) => {
list
.slice()
.reverse()
.forEach((row, index, arr1) => {
// console.log(row, index);
if ((!row.haveChildFlag && !row.menuFlag) || (row.haveChildFlag && !row.menuFlag)) {
list.splice(arr1.length - 1 - index, 1);
} else {
// console.log("是菜单，并且有子菜单", row);
get(row.childList);
}
});
resolve(list);
});
};
get(res).then((res) => {
context.commit('getMenuList', res)
});
});
}
filterMenu(payload)
},
//获取菜单列表
getMenuList(context) { //发送网络请求获取菜单列表
return new Promise((resolve, reject) => {
getListMenu().then(res => {
const code = res.data.code;
if (code == 100) {
const content = res.data.content.allPermissionList;
context.commit('getPermissionList', content)
// console.log(content);
resolve(content)
} else {
const message = res.data.message
reject(message)
}
});
})
},
在mutations中：
getMenuList(state, params) {//更新保存菜单列表
state.menuList = params
},
在index.js中 保存的state：
const state = {
menuList: [],//菜单列表
}
数据：
"content":{
"allPermissionList":[
{
"childList":[
{
"childList":[],
"haveChildFlag":false,///根据这个字段判断是不是有没有子级
"menuFlag":true,///根据这个字段判断是不是菜单 是菜单就在导航中显示出来
"modelAction":"admin/listRole",
"parentLevelId":1,
"permissionId":2,
"permissionName":"角色管理"
},
{
"childList":[],
"haveChildFlag":true,
"menuFlag":true,
"modelAction":"admin/listPermission",
"parentLevelId":1,
"permissionId":8,
"permissionName":"菜单管理"
},
],
"haveChildFlag":true,
"menuFlag":true,
"modelAction":"admin",
"parentLevelId":0,
"permissionId":1,
"permissionName":"系统管理"
},
{
"childList":[
{
"childList":[],
"haveChildFlag":false,
"menuFlag":false,
"modelAction":"terminal/listTerminal",
"parentLevelId":6,
"permissionId":7,
"permissionName":"设备列表"
},
],
"haveChildFlag":true,
"menuFlag":true,
"modelAction":"terminal",
"parentLevelId":0,
"permissionId":6,
"permissionName":"设备管理"
},
{
"childList":[
{
"childList":[
{
"childList":[],
"haveChildFlag":false,
"menuFlag":true,
"modelAction":"dispathTask/yinliu/follow",
"parentLevelId":61,
"permissionId":63,
"permissionName":"关注功能"
}
],
"haveChildFlag":true,
"menuFlag":true,
"modelAction":"executeTask/yinliu",
"parentLevelId":59,
"permissionId":61,
"permissionName":"引流功能"
},
{
"childList":[],
"haveChildFlag":false,
"menuFlag":true,
"modelAction":"dispathTask/danxiang",
"parentLevelId":59,
"permissionId":66,
"permissionName":"单项功能"
},
],
"haveChildFlag":true,
"menuFlag":true,
"modelAction":"dispathTask",
"parentLevelId":0,
"permissionId":59,
"permissionName":"任务下发"
},
{
"childList":[],
"haveChildFlag":false,
"menuFlag":false,
"modelAction":"admin/getCurrentUserInfo",
"parentLevelId":0,
"permissionId":78,
"permissionName":"获取当前用户信息"
},
]
},
效果：
image.png
image.png
