基于antd的Menu组件实现菜单查询

最新推荐文章于 2025-04-12 18:44:00 发布

Abin0406

最新推荐文章于 2025-04-12 18:44:00 发布

阅读量2.9k

点赞数

分类专栏： antd 文章标签： antd 菜单查询 Menu组件 react

本文链接：https://blog.youkuaiyun.com/bin_zi_123/article/details/99449446

版权

在antd的react项目中，为实现菜单的模糊查询功能，根据输入值动态显示匹配的菜单。由于项目国际化需求，需在前端过滤已国际化的菜单。本文介绍了两种方法：一是筛选后处理，二是筛选前处理（推荐）。通过递归遍历菜单树，展示匹配的非叶子节点及其子节点，以及匹配的叶子节点及其祖先节点。最终推荐使用预筛选的方式，代码简洁高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因项目需要对antd开发的项目实现菜单可筛选的功能，根据输入值，模糊查询所匹配的菜单并显示，因项目对国际化有要求，但项目中所有国际化资源文件均是以文件的形式提供，数据库仅存有国际化的key值，因此只能在前端对国际化后的菜单集合做的菜单做过滤，使用递归方式实现，需求描述如下。

1. 找出所有非叶子节点匹配的菜单项，将其子、子子节点直接显示
2. 找出所有叶子节点匹配项，将其父、祖父等祖籍节点直接显示

方式一，对传入后的值做筛选处理，修改getNavMenuItems及相关函数

//关键代码：
 /**
   * 获得菜单子节点
   * @memberof SiderMenu
   */
  getNavMenuItems = (menusData, parent) => {
    if (!menusData || (Object.prototype.toString.call(menusData) != '[object Array]')) {
      return [];
    }
    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map(item => {
        // make dom
        const str = "设备";
        if(str == undefined || str.length < 1) { //查询为空时，全部显示
          const ItemDom = this.getSubMenuOrItem2(item);
          return this.checkPermissionItem(item.authority, ItemDom);
        } else {
          const parentList = this.checkParentMenu(item, str)
          const list = parentList.flat(Infinity);
          if(list != null && list.length > 0) {  //祖籍节点匹配，该祖籍节点下子节点全部显示
            const ItemDom = this.getSubMenuOrItem2(item);
            return this.checkPermissionItem(item.authority, ItemDom);
          } else {  //子节点匹配，祖籍节点全部显示
            const ItemDom = this.getSubMenuOrItem(item

最低0.47元/天解锁文章