treeData树形数据模糊搜索

需求: 在页面输入label,得到所有匹配的label和对应的父级

原始数据

  const a = [
    {
      id: '11',
      label: 'A系统',
      children: [
        {
          id: '11-21',
          label: '二级系统',
          children: [
            { id: '11-21-31', label: '三级系统01', children: null },
            { id: '11-21-32', label: '三级系统02', children: null },
          ],
        },
      ],
    },
    {
      id: '22',
      label: 'B系统',
      children: [
        {
          id: '22-21',
          label: '二级系统',
          children: [
            { id: '22-21-31', label: '三级系统03', children: null },
            { id: '22-21-32', label: '其他系统', children: null },
          ],
        },
      ],
    },
  ]

 

实现方法, 先递归得到匹配的ID

// 先拿到所有匹配的ID
  let selectIds = []
  const render = (data, label) => {
    let flag = false
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      if (item.label.indexOf(label) > -1) {
        console.log(item)
        selectIds.unshift(item.id)
        flag = true
      } else if (item.children && item.children.length) {
        if (render(item.children, label)) {
          selectIds.unshift(item.id)
          flag = true
        }
      }
    }
    return flag
  }

  render(a, '三级系统')
  console.log(1, selectIds) // ['22', '22-21', '22-21-31', '11', '11-21', '11-21-32', '11-21-31']

再通过ID筛选出符合的数据

// 根据ID匹配出树形数据
  const render2 = (data, newData) => {
    data.forEach((item) => {
      if (selectIds.includes(item.id)) {
        if (item.children && item.children.length) {
          item.children = render2(item.children, [])
        }
        newData.push(item)
      }
    })
    return newData
  }
  const searchData2 = render2(a, [])
  console.log(2, searchData2)

得到的数据

 

这样就可以了