实现树的搜索
通过关键字模糊搜索,将其他不涉及的分支移除
子节点符合规则,孙节点不符合规则,剔除孙节点,显示子节点以上的节点
搜索节点以上字根节点
图形演示大概逻辑
export default {
components: {
treeNode
},
name: 'tree_s',
data () {
return {
treeData: [
{
title: '0',
id: 1,
parentId: 0,
children: [
{
title: '0-0',
id: 2,
parentId: 1,
children: [
{
title: '0-0-0',
id: 3,
parentId: 2,
children: []
},
{
title: '枣1',
id: 4,
parentId: 2,
children: [
{
title: '红',
id: 5,
parentId: 4,
children: [
{
title: '红枣',
id: 7,
parentId: 5,
children: []
}
]
},
{
title: '小红',
id: 6,
parentId: 4,
children: []
}
]
}
]
}
]
},
{
title: '1',
id: 8,
parentId: 0,
children: [
{
title: '778',
id: 9,
parentId: 8,
children: []
}
]
},
{
title: '2',
id: 10,
parentId: 0,
children: [
{
title: '枣枣',
id: 11,
parentId: 10,
children: [
{
title: '456',
id: 12,
parentId: 11,
children: []
}
]
}
]
}
],
filterTree: [],
filterValue: ''
}
},
watch: {
filterValue: function (val) {
if (val === '') {
this.filterTree = this.treeData
} else {
this.handelTree(val)
}
}
},
methods: {
handelTree (val) {
// 将树扁平化 同时查找包含关键字的节点
const delayering = this.delayering(val)
const treeNode = delayering.treeNode
const likeNode = delayering.likeNode
const resultTree = []
const resultTreeObj = {}
const childNodeObj = {}
// 将查找出来的节点逆推
function f (node) {
if (node.parentId === 0) {
if (!resultTreeObj[node.id]) {
resultTree.push(node)
resultTreeObj[node.id] = true
}
} else {
if (!childNodeObj[node.id]) {
treeNode[node.parentId].children.push(node)
childNodeObj[node.id] = true
}
f(treeNode[node.parentId])
}
}
// 把根节点每一项代入
for (let i = 0; i < likeNode.length; i++)f(likeNode[i])
this.filterTree = resultTree
},
// 扁平化方法
delayering (val) {
const treeNode = {}
const likeNode = []
function f (childNode) {
for (let i = 0; i < childNode.children.length; i++)f(childNode.children[i])
childNode.children = []
treeNode[childNode.id] = childNode
if (childNode.title.indexOf(val) !== -1) likeNode.push(childNode)
}
const treeData = JSON.parse(JSON.stringify(this.treeData))
for (let i = 0; i < treeData.length; i++) f(treeData[i])
return { treeNode, likeNode }
}
}
}
搜索演示地址:树搜索
关于树的渲染实现:组件递归 树的实现
还有很多方法可以实现树搜索,不妨再来和我交流一下吧