vue模糊查询

Question

关于模糊查询
数据格式

const datas = [
  {
    id:0,
    name:"食物",
    child:[
     {id:001,name:"香蕉"},
     {id:002,name:"苹果"}
    ]
  },
  {
    id:1,
    name:"用品",
    child:[
      {id:100,name:"xxx"},
      {id:101,name:"kkkk"}
    ]
  },
  {
   id:2,
   name:"哈哈",
  },
]

搜索表单
<input v-model.trim="keywords" />
<ul>
  <li v-for="item in filterDatas">{{item.name}}</li>
<ul>

data(){
  return {
    database:datas,
    keywords:""
  }
},
computed:{
  filterDatas(){
    let kw = this.keywords;
    if(kw){
      return this.database.filter(item=>{
        return item.name.indexOf(kw) !== -1
      })
    }
    return this.database
  }
}

这样写为什么没有结果呢。
求教，而且原数据里的child 嵌套层次会很深，理论上是无限级。后端返回的。
折腾了1天了，请大神们帮帮忙。 -_-

Answer 1

computed: {
  filterDatas() {
    const result = [],
      kw = this.keywords;
    let ary = this.database;
    while (ary.length) {
      const children = [];
      for (const item of ary) {
        if (item.name.indexOf(kw) !== -1) result.push(item);
        if (item.child) children.push(...item.child);
      }
      ary = children;
    }
    return result;
  },

更建议用这段代码逻辑提前压平数组就能直接使用你的代码来筛选了，效率更高。

Answer 2

应该是没问题才对，只是这个只搜索了第一层，往下的层级就搜不到了，这个只能是有下一层就去遍历，没有其他办法

Answer 3

你的写法只查了第一层
应先递归重组成一维数组(提高性能), 再使用你的方法就好

模拟代码:

function rebuildData(data){
  const result = []
  function 递归(data){
    for (const item of data) {
      if(item.name)result.push({id:item.id,name:item.name});
      if(item.child && item.child.length>0) {递归(item.child)}
    }
  }
  递归(data)
  return result
}

var rData = rebuildData(datas)
var kw = '蕉'
console.log('=====debug=====',rData.filter(v=>v.name.includes(kw)));