vue封装tree组件实现搜索功能

<a-input-search
  style="margin-bottom: 2px"
  placeholder="搜索"
  @change="searchOrg"
  :allowClear="true"
  v-model="searchPerson"
></a-input-search>
<a-tree class="tree_box" ref="tree" @select="onSelect" :tree-data="currentTree" default-expand-all />

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