【仅记录】前端-自写类似树结构数据的模糊查询

一、类似树结构数据的模糊查询：

需求：根据输入的文字对数据进行模糊查询

1、类似对象树的数据如下：

let listData = [
    {    headerlist:{
            tools:[
                {name:'赵',age:20},
                {name:'钱',age:15},
                {name:'孙',age:12},
            ],
            update:[
                {name:'李',age:16},
                {name:'周',age:22},
                {name:'吴',age:32},
            ],
        },    
    },
    {    leftlist:{
            tools:[
                {...}
            ],
            update:[
                {...}
            ],
        },
    {,
    {    rightlist:{
            [......]
        }
    }
]

2、具体代码：

方法调用的vue页面：

<script setup lang="ts">   

     import { objectHaveArrSearch } from './searchTree.js'

    /**
     * 顶部查询
     */
    const handleSearch = () => {
        const searchObj = objectHaveArrSearch(selectname,searchinput,treeData)
        console.log(searchObj,' --searchObj')
    }

</script>

js文件查询公共方法：

（这里其实就是确定了这个类似树结构的层数，否则不能按照底下的这种写）

 export function objectHaveArrSearch(select,value,tree) {
      let newarr = []
      tree.filter(item => {
        let newarr1 = {}
        let newarr2 = {}
        for(const key in item) {
          for(const key1 in item[key]) {
            let a = []
            if(item[key][key1].length>0) {
              item[key][key1].filter(item1 => {
                if(item1.name.indexOf(value) > -1){    // 判断name中是否含有查询的内容
                  a.push(item1)
                }
              })
            }
            newarr2[key1] = a
          }
          newarr1[key] = newarr2
        }
        newarr.push(newarr1)
      })
      return newarr
  }

二、普通树查询：

1、方法调用：

gData = mapTree(searchValue, data)

2、js文件中写入：

/**
 * 组织筛选树
 * @param value 筛选纸
 * @param arr 树
 * @returns
 */
export function mapTree(value, arr) {
  let newarr = []
  arr.forEach((element) => {
    if (element.title.indexOf(value) > -1) {
      // 判断条件
      newarr.push(element)
    } else {
      if (element.children && element.children.length > 0) {
        let redata = mapTree(value, element.children)
        if (redata && redata.length > 0) {
          let obj = {
            ...element,
            children: redata,
          }
          newarr.push(obj)
        }
      }
    }
  })
  return newarr
}

---

本次也只做记录，记录一下模糊查询的方法，其他的步骤会根据不同的数据进行变化，因为目前项目数据的层数已知，所以可以这么写。目前这个方法能复用的概率不太大。