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

<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>