<template>
<div>
<div>
<Input :maxlength="5" v-model="searchValue" size="large"/>
<listdata :list="list3" :depth="0"></listdata>
</div>
</div>
</template>
<script>
import listdata from './list'
import {
Input
} from 'view-design'
export default {
name: "detailes",
components: {
listdata,Input
},
data() {
return {
searchValue: '',
list3: [],
list2: [],
list1: [{
title: "根级菜单",
children: [{
title: "1级菜单",
children: [
{
title: "1级菜单-1",
},
{
title: "1级菜单-2",
}
]
},
{
title: "3级菜单2级菜单",
children: [
{
title: "2级菜单-1",
},
{
title: "2级菜单-2",
}]
},
{
title: "3级菜单",
children: [
{
title: "3级菜单-1",
},
{
title: "3级菜单-2",
}]
}
]
}]
}
},
watch: {
searchValue() {
this.debouncedGetTableByName()
}
},
mounted() {
// console.log(this.findJieDian(this.list1, data => data.title === '3级菜单-1'))
this.debouncedGetTableByName = this.$Lodash.debounce(this.search, 500, false)
this.diguiList(this.list2,this.list1)
this.diGuihalfSelect(this.list2)
this.list3=JSON.parse(JSON.stringify(this.list2))
this.productFilter(this.list3, '')
},
methods: {
findJieDian(list, fun, path = []) {
for (let node of list) {
path.push(node.title)
if (fun(node)) {
return path
}
if (node.children) {
let fatherArray = this.findJieDian(node.children, fun, path)
if (fatherArray.length > 0) {
return fatherArray
}
}
path.pop()
}
return []
},
//原始数据递归树
diguiList(list2, list1) {
list1.forEach((item, index) => {
list2[index] = Object.assign({}, item, {
show: true,
selected: false,
halfSelected: false,
})
if (item.children && item.children.length) {
this.diguiList(list2[index].children, item.children)
}
})
},
//半选递归
diGuihalfSelect(list2){
list2.forEach(item=>{
if(item.children && item.children.length){
this.diGuihalfSelect(item.children)
item.halfSelected=item.selected?false:(item.children.some((node)=>{return node.selected==true}) || item.children.some((node)=>{return node.halfSelected==true}))
}
})
},
//搜索过滤树节点
search() {
this.list3=JSON.parse(JSON.stringify(this.list2))
this.productFilter(this.list3, this.searchValue)
},
productFilter(list, name) {
list.forEach(item=>{
if (item.children && item.children.length) {
this.productFilter(item.children, name);
item.children = item.children.filter(item => {
/**自己符合条件或者子级符合条件 */
if (item.title.indexOf(name) != -1 || item.has) {
return item;
}
});
/**发现子级有满足条件的,给父级添加标识,再次循环时保留父级 has:为标识字段*/
item.children.length && (item.has = true);
}
})
// const listLength = list.length;
// for (let index = 0; index < listLength; index++) {
// /**父级满足条件,子级全保留 */
// // if (list[index].title .indexOf(name)!=-1){
// // continue;
// // }
// if (list[index].children && list[index].children.length) {
// this.productFilter(list[index].children, name);
// list[index].children = list[index].children.filter(item => {
// if (item.title.indexOf(name) != -1 || item.has) {
// return item;
// }
// })
//list[index].has = true;
// }
//
// }
}
}
}
</script>
<style scoped>
</style>
vue递归树结构,实现树结构搜索
最新推荐文章于 2024-07-25 09:36:58 发布