<input type="text" v-model="inputSearch" @input="search" />
测试数据
data(){
return{
inputSearch:'',//与输入框双向绑定的搜索参数
showList:[],//展示的数据
allList:[
{ id:1,parentId:0,name:'根目录' },
{ id:2,parentId:1,name:'目录1-1' },
{ id:3,parentId:2,name:'目录2-1' },
{ id:4,parentId:3,name:'目录3-1' },
{ id:5,parentId:1,name:'目录1-2' },
],//全部数据 - 测试数据
arr:[],
arr2:[],
arr3:[]
}
}
methods:{
search(){
this.showList = []
this.arr = []
this.arr3 = []
this.arr2 = JSON.parse(JSON.stringify(this.allList)) //防止影响到原数组
if(this.inputSearch == ''){
this.showList = this.transArr(JSON.parse(JSON.stringify(this.allList)))
}else{
for(let i in this.this.arr2){
// toLowerCase() 不区分大小写 indexOf 匹配失败时会返回 -1
if (this.arr2[i].name.toLowerCase().indexOf(this.inputSearch.toLowerCase()) != -1) {
this.arr.push(this.arr2[i])
}
}
// 通过上面,就将模糊搜索到的数据全部放进 arr 了,但是这不能保证某个搜索到的分组的父级分组一定拿到了,所以还要再做判断
if (this.arr[0]) {
await this.loop()
// arr3就是此次查询到的数据 + 其父级数据 expand参数作为判断
this.arr3.forEach((item) => {
item.expand = true
})
// 如果不是只想展示部分,而是想展示全部
this.arr2.forEach((item) => {
this.arr3.forEach((item2) => {
if (item.id == item2.id) {
item = item2
}
})
})
this.showList= this.transArr(JSON.parse(JSON.stringify(this.arr2)))
} else {
this.showList= this.transArr(JSON.parse(JSON.stringify(this.allList)))
}
}
},
// 循环遍历
loop() {
for (let i in this.arr) {
this.arr2.forEach((item) => {
if (this.arr[i].parentId == item.id) {
this.arr.push(item)
this.arr3.push(this.arr[i])
this.arr.splice(i, 1)
this.loop()
}
})
}
},
// 转换数据格式,将一维数组转换为多维数组
transArr(info) {
let arr = []
info.forEach((item) => {
item.children = []
info.forEach((res) => {
if (res.parentId== item.id) {
item.children.push(res)
}
})
})
for (let i in info) {
if (info[i].parentGroupId == 0) {
info[i].expand = true
arr.push(info[i])
}
}
return arr
},
}