树形菜单关键词过滤及关键词高亮

 

​​​​​​​

    filterMenuHandle(keyword, allMenuList) {
      const reg = new RegExp(keyword, 'gi')

      const rebuildData = (keyword, arr) => {
        let newarr = [];
        arr.forEach(element => {
          if (element.meta.title.toUpperCase().includes(keyword)) { // 当前节点匹配，则
            let elementStr = JSON.stringify(element, (key, val) => {
              if (key === 'component') {
                return
              } else if (key === 'title') { // 菜单显示名称的 key 在整个菜单配置数据中必须唯一，否则会出现错误替换；使用递归函数替换菜单显示名称则无此问题
                if (val.toUpperCase().includes(keyword)) {
                  return val.replace(reg, (str, index, source) => {
                    return `<span class='highlight'>${str}</span>`
                  })
                }
                return val
              }
              return val
            })

            newarr.push(JSON.parse(elementStr));
          } else { // 当前节点不匹配
            if (element.children && element.children.length) { // 有子节点
              const ab = rebuildData(keyword, element.children);
              if (ab && ab.length) { // 子节点有匹配的
                newarr.push({
                  ...element,
                  children: ab
                });
              }
            }
          }
        });
        return newarr;
      };
      return rebuildData(keyword, allMenuList);
    },

参考：https://blog.csdn.net/QIANG123___/article/details/98734680