正文

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

文章摘要

本文描述了一种基于树形结构的递归搜索算法,用于根据关键词过滤和构造新的树形结构。该算法通过遍历树的每个节点,检查节点标题是否包含关键词,若符合条件则将其及其子节点(根据参数决定)复制到新树中。若节点不符合条件但存在子节点,则递归遍历子节点以继续搜索。最终,算法通过`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>