vue封装tree组件实现搜索功能(vue3组件封装)满满干货

随心笔谈9个月前发布 admin
192 00
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

文章摘要

本文描述了一种基于树形结构的递归搜索算法,用于根据关键词过滤和构造新的树形结构。该算法通过遍历树的每个节点,检查节点标题是否包含关键词,若符合条件则将其及其子节点(根据参数决定)复制到新树中。若节点不符合条件但存在子节点,则递归遍历子节点以继续搜索。最终,算法通过`searchTree`方法返回符合条件的节点集合,并通过`searchOrg`方法将结果赋值给当前树结构。该算法适用于需要动态调整树形结构以满足关键词搜索需求的场景。

<script>
export default {
props: {
treeList: {
type: Array,
default: ()=> []
},
},
data() {
return {
searchPerson: ”,
currentTree: this.treeList,
}
},
methods: {
searchTree(tree, keyword, includeChildren=false) {
const newTree=[]
for (let i=0; i < tree.length; i++) {
const node=tree[i]
if (node.title.includes(keyword)) {
// 如果当前节点符合条件,则将其复制到新的树形结构中,并根据 includeChildren 参数决定是否将其所有子节点也复制到新的树形结构中
newTree.push({ …node, children: includeChildren ? this.searchTree(node.children || [], ”, true) : [] })
} else if (node.children) {
// 如果当前节点不符合条件且存在子节点,则递归遍历子节点,以继续搜索
const result=this.searchTree(node.children, keyword, true)
if (result.length > 0) {
// 如果子节点中存在符合条件的节点,则将其复制到新的树形结构中
newTree.push({ …node, children: result })
}
}
}
return newTree
},
searchOrg() {
this.currentTree=this.searchTree(this.treeList, this.searchPerson, true)
},
async onSelect(selectedKeys, info) {
},
}
}
</script>

© 版权声明

相关文章