前端基础(三十七):属性结构数据进行关键字筛选

效果

核心源码

ts 复制代码
type MenuItem = {
    label: string;
    key: string | number;
    icon?: React.ReactNode;
    children?: MenuItem[];
    type?: 'group';
}

function filterTreeData(tree: MenuItem[], keyword: string): MenuItem[] {
    return tree.filter((node: MenuItem) => {
        if (node.label.includes(keyword)) {
            return true;
        }
        if (Array.isArray(node.children)) {
            node.children = filterTreeData(node.children, keyword);
            return !!node.children?.length;
        }
        return false;
    });
}

源码

ts 复制代码
import React, {useState} from 'react';
import {
    BarChartOutlined, CompassOutlined, DatabaseOutlined, DeploymentUnitOutlined, DesktopOutlined, SettingOutlined,
    FundProjectionScreenOutlined, FundViewOutlined, HomeOutlined, MenuFoldOutlined, MenuUnfoldOutlined, MessageOutlined,
    TrophyOutlined, VerifiedOutlined,
} from '@ant-design/icons';
import {Flex, Button, Menu as AntdMenu} from 'antd';
import Search from "antd/es/input/Search";
import {SearchProps} from "antd/lib/input";

type MenuItem = {
    label: string;
    key: string | number;
    icon?: React.ReactNode;
    children?: MenuItem[];
    type?: 'group';
}

function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[], type?: 'group',): MenuItem {
    return {key, icon, children, label, type,} as MenuItem;
}

function filterTreeData(tree: MenuItem[], keyword: string): MenuItem[] {
    return tree.filter((node: MenuItem) => {
        if (node.label.includes(keyword)) {
            return true;
        }
        if (Array.isArray(node.children)) {
            node.children = filterTreeData(node.children, keyword);
            return !!node.children?.length;
        }
        return false;
    });
}

const Menu: React.FC = () => {

    const menuItems: MenuItem[] = [
        getItem('首页', '1', <HomeOutlined/>),
        getItem('平台管理', '2', <DesktopOutlined/>, [
            getItem('学生管理', '2-1'),
            getItem('教师管理', '2-2'),
            getItem('班级管理', '2-3'),
            getItem('任务管理', '2-4', null, [
                getItem('课程管理', '2-4-1'),
                getItem('发布任务', '2-4-2'),
            ]),
            getItem('作业管理', '2-5'),
            getItem('答卷管理', '2-6', null, [
                getItem('批卷列表', '2-6-1'),
                getItem('批卷结果', '2-6-2'),
            ]),
        ]),
        getItem('平台资源', '3', <DatabaseOutlined/>),
        getItem('教学实训', '4', <MessageOutlined/>),
        getItem('培训认证', '5', <VerifiedOutlined/>),
        getItem('技能竞赛', '6', <TrophyOutlined/>),
        getItem('科研实验', '7', <DeploymentUnitOutlined/>),
        getItem('数据平台', '8', <BarChartOutlined/>),
        getItem('算法平台', '9', <FundProjectionScreenOutlined/>),
        getItem('系統管理', '10', <CompassOutlined/>),
        getItem('系统监控', '11', <FundViewOutlined/>),
        getItem('系統工具', '12', <SettingOutlined/>),
    ];

    const [items, setItems] = useState<MenuItem[]>(menuItems);

    const [collapsed, setCollapsed] = useState(false);

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    const onSearch: SearchProps['onSearch'] = (value, _e, _info) => {
        setItems(filterTreeData(menuItems, value));
    };

    return (
        <>
            <div className="menu-tool">
                <Flex gap={10}>
                    {collapsed ? '' : (<Search placeholder="在此输入关键词..." onSearch={onSearch}/>)}
                    <Button block={collapsed} type="primary" onClick={toggleCollapsed} icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}/>
                </Flex>
            </div>
            <AntdMenu defaultSelectedKeys={['1']} mode="inline" inlineCollapsed={collapsed} items={items}/>
        </>
    );
};

export default Menu;
相关推荐
Json_181790144806 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟7 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光11 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用12 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网29 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
Dola_Pan29 分钟前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs29 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678930 分钟前
JDK1.8新增特性
java·开发语言
木子020431 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing33 分钟前
React核心功能详解(一)
前端·react.js·前端框架