树形数据模糊搜索

  • 根据关键字搜索树🌲型结构
  • 如果父级不含有关键字而子集含有,则父级也要展示
  • 如果父级不含有关键字且子集也不含有,则父级子集都不展示

💩比如给你下面这些数据,展示关键字搜索name的结果,你会怎么做🤔:

json 复制代码
 "data": [
        {
            "id": 23,
            "parentId": 0,
            "name": "主题b",
            "level": 1,
            "children": [
                {
                    "id": 24,
                    "parentId": 23,
                    "name": "主题",
                    "level": 2,
                    "children": [
                        {
                            "id": 25,
                            "parentId": 24,
                            "name": "主题",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 27,
            "parentId": 0,
            "name": "主题d",
            "level": 1,
            "children": [
                {
                    "id": 28,
                    "parentId": 27,
                    "name": "主题d1",
                    "level": 2,
                }
            ]
        },
        {
            "id": 1,
            "parentId": 0,
            "name": "提款相关",
            "level": 1,
            "children": [
                {
                    "id": 2,
                    "parentId": 1,
                    "name": "提款问题-会员",
                    "level": 2,
                    "children": [
                        {
                            "id": 3,
                            "parentId": 2,
                            "name": "提款失败",
                            "level": 3,
                            "children": [
                                {
                                    "id": 4,
                                    "parentId": 3,
                                    "name": "提款失败-财务环节",
                                    "level": 4,
                                },
                                {
                                    "id": 5,
                                    "parentId": 3,
                                    "name": "提款失败-三方环节",
                                    "level": 4,
                                },
                                {
                                    "id": 6,
                                    "parentId": 3,
                                    "name": "提款失败-人工环节",
                                    "level": 4,
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "id": 17,
            "parentId": 0,
            "name": "存款问题",
            "level": 1,
            "children": [
                {
                    "id": 18,
                    "parentId": 17,
                    "name": "存款-会员",
                    "level": 2,
                    "children": [
                        {
                            "id": 19,
                            "parentId": 18,
                            "name": "存款消息",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 7,
            "parentId": 0,
            "name": "充值问题",
            "level": 1,
            "children": [
                {
                    "id": 8,
                    "parentId": 7,
                    "name": "充值问题-商户",
                    "level": 2,
                }
            ]
        },
        {
            "id": 20,
            "parentId": 0,
            "name": "主题a",
            "level": 1,
            "children": [
                {
                    "id": 21,
                    "parentId": 20,
                    "name": "主题a1",
                    "level": 2,
                    "children": [
                        {
                            "id": 22,
                            "parentId": 21,
                            "name": "主题a2",
                            "level": 3,
                        }
                    ]
                }
            ]
        },
        {
            "id": 26,
            "parentId": 0,
            "name": "主题",
            "level": 1,
        },
        {
            "id": 12,
            "parentId": 0,
            "name": "账号相关",
            "level": 1,
            "children": [
                {
                    "id": 13,
                    "parentId": 12,
                    "name": "信息安全",
                    "level": 2,
                    "children": [
                        {
                            "id": 14,
                            "parentId": 13,
                            "name": "修改信息问题",
                            "level": 3,
                            "children": [
                                {
                                    "id": 15,
                                    "parentId": 14,
                                    "name": "问题描述1",
                                    "level": 4,
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 16,
                    "parentId": 12,
                    "name": "账号冻结",
                    "level": 2,
                }
            ]
        }
    ],

🚀2、接下来我们直接上干货(这里面要思考一下下的🤔)

ini 复制代码
const filterDataByName = (name) => {
   if (name) {
      const filterData = [];
      const dripChildren = (arr, copyArr) => {
        const pick = new Set();
        for (let i = 0, len = arr.length; i < len; i++) {
          const { children, ...rest } = arr[i];
          if (arr[i].name.indexOf(name) > -1) {
            copyArr.push(rest);
          }
          
          if (children?.length) {
            rest.children = [];
            const finalChildren = dripChildren(children, rest.children);
            if (arr[i].name.indexOf(name) < 0) {
              if (!finalChildren && !rest.children.length) {
                rest.children = undefined;
              } else {
                copyArr.push(rest);
              }
            }
          } else {
            if (arr[i].name.indexOf(name) > -1) {
              pick.add(arr[i].id);
            }
          }
        }
        
        if (pick.size > 0) {
          return arr.filter((item) => pick.has(item.id));
        }
      }
      
      // data为原始数据
      // 当搜索关键词为空时,我们直接用原始数据data
      // 当搜索关键词不为空,我们用最终过滤的filterData
      
      dripChildren(data, filterData);
      
      console.log(filterData, '这就是最终过滤出来的数据')
   }
}
相关推荐
翻滚吧键盘2 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾7 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明12 分钟前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
超级土豆粉15 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。21 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
desssq31 分钟前
力扣:70. 爬楼梯
算法·leetcode·职场和发展
乆夨(jiuze)41 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
clock的时钟1 小时前
暑期数据结构第一天
数据结构·算法
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互