将对象push到数组中,内含模糊搜索,使用element组件

96 阅读1分钟

对输入的数据进行模糊搜索,再返回给组件展示,(此处我的给树组件的数据有需要特定的格式) 需要上传一些数据到新的数组里然后再返回给组件,这些数据有名称字符类型,有数组

解决办法

①新建一个空数组 ②判断输入框是否有输入数据 ③对数据进行模糊搜索,过滤 ④将要传递的字符和数组装进一个对象,再将这个对象推进数组

模糊搜索的关键在indexOf()

关键代码

let arr = []
let arrSub = [{name:'大王',age:'12'},{name:'小王',age:'13'}]
arr.push({
  title:'名称',
  children:arrSub
})

JS

 computed(){
    search() {
      let that = this
      let arr = []
      if (that.searchKey) {
        that.headerList.forEach(item => {
          let b = item.children.filter(item => item.title.indexOf(that.searchKey) > -1)
          // console.log(b)
          if (b.length) {
            arr.push({
              title: item.title,
              children: b
            })
          }
        })
        // console.log(arr)
        return arr
      } else {
      //headerList是
        return that.headerList
      }
    }
 }

HTML

 <div class="search-box">
   <el-input size="small" class="search-input" placeholder="请输入关键词" v-model="searchKey">
     <i slot="prefix" class="el-input__icon el-icon-search"></i>
   </el-input>
 </div>
 <div class="checks-box">
   <el-tree
     :data="searchL"
     default-expand-all
     :props="defaultProps"
     @check="checkFn"
   ></el-tree>
 </div>