js tree结构不改变原来结构过滤数据

秋风悲凉

已于 2023-07-19 11:11:18 修改

阅读量198

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-07-19 11:09:59 首次发布

本文链接：https://blog.csdn.net/qq_38383302/article/details/131804197

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要过滤的tree

[
    {
        "menuId":1,
        "menuName":"首页",
        "parentId":0
    },
    {
        "menuId":1001,
        "menuName":"业务配置",
        "parentId":0,
        "children":[
            {
                "menuId":1701,
                "menuName":"拓扑结果查看",
                "parentId":1001,
                "orderNum":1701
            },
            {
                "menuId":1801,
                "menuName":"扫码设备查看",
                "parentId":1001,
                "orderNum":1801
            },
            {
                "menuId":1851,
                "menuName":"注册设备查看",
                "parentId":1001,
                "orderNum":1851
            }
        ]
    },
    {
        "menuId":2,
        "menuName":"系统管理",
        "parentId":0,
        "orderNum":999,
        "children":[
            {
                "menuId":1856,
                "menuName":"扫码配置",
                "parentId":2,
                "orderNum":100
            },
            {
                "menuId":101,
                "menuName":"系统字典",
                "parentId":2,
                "orderNum":101
            },
            {
                "menuId":131,
                "menuName":"部门管理",
                "parentId":2,
                "orderNum":131
            },
            {
                "menuId":151,
                "menuName":"用户管理",
                "parentId":2,
                "orderNum":151
            },
            {
                "menuId":201,
                "menuName":"角色管理",
                "parentId":2,
                "orderNum":201
            },
            {
                "menuId":301,
                "menuName":"菜单管理",
                "parentId":2,
                "orderNum":301
            },
            {
                "menuId":901,
                "menuName":"系统配置",
                "parentId":2,
                "orderNum":901
            },
            {
                "menuId":951,
                "menuName":"系统日志",
                "parentId":2,
                "orderNum":951
            }
        ]
    }
]

过滤之后数据

[
    {
        "menuId":1701,
        "menuName":"拓扑结果查看",
        "parentId":1001,
        "orderNum":1701
    },
    {
        "menuId":1801,
        "menuName":"扫码设备查看",
        "parentId":1001,
        "orderNum":1801
    },
    {
        "menuId":1851,
        "menuName":"注册设备查看",
        "parentId":1001,
        "orderNum":1851
    }
]

过滤方法

//数据过滤保存原来树结构
getTree = tree => {
    const newTree = tree.filter(item => item.menuName != "系统管理" && item.menuName != "设置故障码")
    return newTree.map(item => {
        if (item.children) {
            item.children = getTree (item.children)
        }
        return item
    })
}
//调用方法
getTree(res.data.data)