对输入的数据进行模糊搜索,再返回给组件展示,(此处我的给树组件的数据有需要特定的格式) 需要上传一些数据到新的数组里然后再返回给组件,这些数据有名称字符类型,有数组
解决办法
①新建一个空数组 ②判断输入框是否有输入数据 ③对数据进行模糊搜索,过滤 ④将要传递的字符和数组装进一个对象,再将这个对象推进数组
模糊搜索的关键在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>