前端大杂烩

查询树状菜单,返回新的树状菜单

2022-11-16  本文已影响0人  写写而已
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            let menus = [
                {
                    name: '河南',
                    children: [
                        {
                            name: '郑州',
                            children: [
                                {
                                    name: '金水区'
                                },
                                {
                                    name: '中原区'
                                }
                            ]
                        },
                        {
                            name: '信阳',
                            children: [
                                {
                                    name: '淮滨县'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: '湖北',
                    children: [
                        {
                            name: '武汉市',
                            children: [
                                {
                                    name: '武汉火车站'
                                }
                            ]
                        },
                        {
                            name: '黄石市',
                            children: [
                                {
                                    name: '黄冈'
                                }
                            ]
                        }
                    ]
                }
            ]
            let mmm = JSON.parse(JSON.stringify(menus))
            let key = '中原区'
            const findTree = ({ tree, field, keyword }) => {
                if (!(tree && tree.length)) {
                    return []
                }
                let na = []
                na = tree.map(item => {
                    if (item?.[field]?.toString()?.includes(keyword)) {
                        return item
                    }
                    if (item.children && item.children.length) {
                        const nc = findTree({
                            tree: item.children,
                            field,
                            keyword
                        })
                        if (nc && nc.length) {
                            return {
                                ...item,
                                children: nc
                            }
                        }
                        return null
                    }
                    return null
                })
                na = na.filter(item => item != null)
                return na
            }
            let newm = findTree({
                keyword: key,
                tree: menus,
                field: 'name'
            })
            console.log(newm)
        </script>
    </body>
</html>

上一篇下一篇

猜你喜欢

热点阅读