使用layui实现的左侧菜单栏以及动态操作tab项(动态生成的菜单栏)

https://blog.youkuaiyun.com/nb7474/article/details/79413460/

效果:

项目结构:

后台返回的菜单栏数据结构:

数据(创建一个json文件直接复制到里面去):

{
    "code": 0,
    "msg": "成功",
    "data": [{
        "menuId": 1,
        "parentId": 0,
        "name": "系统管理",
        "url": null,
        "perms": null,
        "type": 0,
        "icon": "system",
        "orderNum": 0,
        "open": null,
        "list": [{
                "menuId": 2,
                "parentId": 1,
                "name": "管理员列表",
                "url": "sys/user",
                "perms": null,
                "type": 1,
                "icon": "admin",
                "orderNum": 1,
                "open": null,
                "list": [{
                        "menuId": 15,
                        "parentId": 2,
                        "name": "查看",
                        "url": null,
                        "perms": "sys:user:list,sys:user:info",
                        "type": 2,
                        "icon": null,
                        "orderNum": 0,
                        "open": null,
                        "list": null
                    },
                    {
                        "menuId": 16,
                        "parentId": 2,
                        "name": "新增",
                        "url": null,
                        "perms": "sys:user:save,sys:role:select",
                        "type": 2,
                        "icon": null,
                        "orderNum": 0,
                        "open": null,
                        "list": null
                    },
                    {
                        "menuId": 17,
                        "parentId": 2,
                        "name": "修改",
                        "url": null,
                        "perms": "sys:user:update,sys:role:select",
                        "type": 2,
                        "icon": null,
                        "orderNum": 0,
                        "open": null,
                        "list": null
                    },
                    {
                        "menuId": 18,
                        "parentId": 2,
                        "name": "删除",
                        "url": null,
                        "perms": "sys:user:delete",
                        "type": 2,
                        "icon": null,
                        "orderNum": 0,
                        "open": null,
                        "list": null
                    }
                ]
            },
            {
                "menuId": 3,
                "parentId": 1,
                "name": "角色管理",
                "url": "sys/role",
                "perms": null,
                "type": 1,
                "icon": "role",
                "orderNum": 2,
                "open": null,
                "list": [{
                        "menuId": 19,
                        "parentId": 3,
                        "name": "查看",
                        "url": null,
                        "perms": "sys:role:list,sys:role:info",
                        "type": 2,
                        "icon": null,
                        "orderNum": 0,
                        "open": null,
                        "list": null
                    },
                    {
                        "menuId": 20,
                        "parentId": 3,
                        "name": "新增

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值