1. 首页
  2. web前端
  3. Vue

菜单递归

今天遇到了这么一个问题,一个管理系统的前端使用vue,通过路由控制用户权限。由后端返回权限编码列表,前端菜单列表需要对这些权限编码进行过滤。菜单是树形结构,如果父级菜单被过滤,则该父级下所有子级菜单也被过滤。由于是树形结构,肯定要用到递归,大致代码如下:

         今天遇到了这么一个问题,一个管理系统的前端使用vue,通过路由控制用户权限。由后端返回权限编码列表,前端菜单列表需要对这些权限编码进行过滤。菜单是树形结构,如果父级菜单被过滤,则该父级下所有子级菜单也被过滤。由于是树形结构,肯定要用到递归,大致代码如下:
// 菜单列表
const menuList = [{
    name: '系统管理',
    code: 'system_manage',
    children: [{
        name: '用户管理',
        code: 'user_manage',
        children: [{
            name: '添加用户',
            code: 'add_user'
        }, {
            name: '编辑用户',
            code: 'edit_user'
        }, {
            name: '删除用户',
            code: 'del_user'
        }]
    }, {
        name: '角色管理',
        code: 'role_manage',
        children: [{
            name: '添加角色',
            code: 'add_role'
        }]
    }]
}, {
    name: '业务管理',
    code: 'bus_manage',
    children: [{
        name: '流程管理',
        code: 'process_manage'
    }]
}, {
    name: '订单管理',
    code: 'order_manage'
}]

// 权限列表
const myMenuCode = ['system_manage', 'user_manage', 'add_user', 'order_manage']

const filterMenu = (menuList, menuCode) => {
    return menuList.filter(item => {
        return menuCode.indexOf(item.code) > -1
    }).map(item => {
        item = Object.assign({}, item)
        if (item.children) {
            item.children = filterMenu(item.children, menuCode)
        }
        return item
    })
}

// 过滤后的菜单
const myMenu = filterMenu(menuList, myMenuCode)

console.log(myMenu)

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=2240

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

登录后才能评论

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code