直播網站程式原始碼，element el-menu，前端做選單搜尋

直播網站程式原始碼，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)
}

 以上就是 直播網站程式原始碼，element el-menu，前端做選單搜尋，更多內容歡迎關注之後的文章