前端 tree 树实现本地模糊搜索

1. 结构树

// tree数据结构
export default [
  {
    code: "01",
    desc: "农、林",
    isOpen: false,
    hasParent: "N",
    children: [
      {
        code: "0101",
        desc: "农业",
        isOpen: false,
        children: [
          {
            code: "0101001",
            level: "1",
            desc: "农场xxxxxx"
          },
          {
            code: "0101002",
            level: "2",
            desc: "农场xxxxxx"
          },
          {
            code: "0101003",
            level: "2",
            desc: "农场xxxxxx"
          },
          {
            code: "0101004",
            level: "3",
            desc: "农场xxxxxx"
          },
          {
            code: "0101005",
            level: "3",
            desc: "农场xxxxxx"
          },
          {
            code: "0101006",
            level: "5",
            desc: "农场xxxxxx"
          }
        ]
      },
      {
        code: "0102",
        desc: "林业",
        isOpen: false,
        children: [
          {
            code: "0102001",
            level: "2",
            desc: "林业xxxxxx"
          },
          {
            code: "0102002",
            level: "4",
            desc: "林业xxxxxx"
          },
          {
            code: "0102003",
            level: "4",
            desc: "林业xxxxxx"
          },
          {
            code: "0102004",
            level: "5",
            desc: "林业xxxxxx"
          },
          {
            code: "0102005",
            level: "5",
            desc: "林业xxxxxx"
          },
          {
            code: "0102006",
            level: "4",
            desc: "林业xxxxxx"
          },
          {
            code: "0102007",
            level: "7",
            desc: "林业xxxxxx"
          }
        ]
      }
    ]
  }
];

1. 实现方案

/**
 * 递归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('desc', '农业', treeList, [])