直播网站程序源码，element el-menu，前端做菜单搜索

方案一：递归+indexof

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

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

<br>/**<br> * 递归tree关键词搜索<br> *<br> * @param {key} 需要递归的key名<br> * @param {value} 需要搜索查询的关键字<br> * @param {treeList} 遍历tree列表<br> * @return {saveList} 返回查询数组列表<br> */<br>function onFuzzyTreeList (key, value, treeList, saveList = []) {<br>  return new Promise((resolve, reject) => {<br>    treeList.forEach(item => {<br>      if (item[key].indexOf(value) > -1) {<br>        saveList.push(item);<br>      } else {<br>        if (item.children && item.children.length > 0) {<br>          const _reData = onFuzzyTreeList(key, value, item.children, saveList);<br>          if (_reData && _reData.length > 0) {<br>            saveList.push({<br>              ...item,<br>              children: _reData<br>            })<br>          }<br>        }<br>      }<br>    })<br>    resolve(saveList)<br>  })<br>}<br>// 调用<br>onFuzzyTreeList('name', '搜索', treeList)<br> 

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

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

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

方案三：递归+filter+indexof

/** @function 定义前端过滤函数 */<br>const filterTree = (treeArr, keywords) => {<br>  function findItem(arr) {<br>    let res = arr.filter((item) => {<br>      if (item.children && item.children.length > 0) {<br>        item.children = childFilter(item.children, keywords)<br>        console.log(item.children)<br>      }<br>      return item.name.indexOf(keywords) !== -1 //不一样的过滤掉<br>    })<br>    return res<br>  }<br>  function childFilter(childArr, keywords) {<br>    let res = childArr.filter((item) => {<br>      // TODO:这里后端说暂时只有2级，所以先预留一下递归逻辑<br>      if (item.children && item.children.length > 0) {<br>      item.children = childFilter(item.children, keywords)<br>      return item.name.indexOf(keywords) !== -1<br>      }<br>    })<br>    return res<br>  }<br>  return findItem(treeArr)<br>}