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

在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, str);
            return this.checkPermissionItem(item.authority
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值