【vue3】element el-menu，前端做菜单搜索

需求背景：

前端业务往往菜单业务，其中有一个业务需求就是模糊搜索功能，通常情况下前端拿到接口数据后会缓存本地，无需与后端网络交互就可以实现本地模糊搜索；

方案一：递归+indexof

实现步骤： JS 实现树形结构数据的模糊搜索查询，

即使父节点没有，但子节点含有，父节点仍要返回。

/**
 * 递归tree关键词搜索
 *
 * @param {key} 需要递归的key名
 * @param {value} 需要搜索查询的关键字
 * @param {treeList} 遍历tree列表
 * @return {saveList} 返回查询数组列表
 */

function onFuzzyTreeList (key, value, treeList, saveList = []) {
  return new Promise((resolve, reject) => {
    treeList.forEach(item => {
      if (item[key].indexOf(value) > -1) {
        saveList.push(item);
      } else {
        if (item.children && item.children.length > 0) {
          const _reData = onFuzzyTreeList(key, value, item.children, saveList);
          if (_reData && _reData.length > 0) {
            saveList.push({
              ...item,
              children: _reData
            })
          }
        }
      }
    })

    resolve(saveList)
  })
}


// 调用
onFuzzyTreeList('name', '搜索', treeList)

方案二：抽取1-2级数据重构（推荐）

1.这里只会默认两级数据的情况下

function onFuzzyTreeList(key, value, treeList) {
  // 所有一级导航组成的数组
  const firstArr = treeList.map((it) => ({ name: it.name, id: it.id, level: 1 }))

  // 所有二级导航组成的数组
  const secondArr = treeList.reduce((rd, it1) => {
    if (!it1.children?.length) return rd
    it1.children.forEach((it2) => {
      ;(it2.level = 2), (it2.firstId = it1.id)
    })
    return [...rd, ...it1.children]
  }, [])
  // 一二级导航组成的数组
  const allArr = [...firstArr, ...secondArr]
  function search(key, val) {
    const arr = allArr.filter((it) => it[key].indexOf(val) != -1)
    const firstArrIds = [...new Set(arr.map((it) => it.firstId || it.id))]
    const firstArrResult = firstArr.filter((it) => firstArrIds.includes(it.id))
    firstArrResult.forEach((it) => {
      it.children = arr.filter((it2) => it2.firstId == it.id)
    })
    return firstArrResult
  }
  return search(key, value)
}

方案三：递归+filter+indexof

/** @function 定义前端过滤函数 */
const filterTree = (treeArr, keywords) => {
  function findItem(arr) {
    let res = arr.filter((item) => {
      if (item.children && item.children.length > 0) {
        item.children = childFilter(item.children, keywords)
        console.log(item.children)
      }
      return item.name.indexOf(keywords) !== -1 //不一样的过滤掉
    })
    return res
  }

  function childFilter(childArr, keywords) {
    let res = childArr.filter((item) => {
      // TODO:这里后端说暂时只有2级，所以先预留一下递归逻辑
      if (item.children && item.children.length > 0) {
	      item.children = childFilter(item.children, keywords)
	      return item.name.indexOf(keywords) !== -1
      }
    })
    return res
  }
  return findItem(treeArr)
}