实现一个vue树形搜索功能

好的，下面我将给出一个基于 Vue 的树形搜索功能的代码示例。

首先，我们需要构建一个树形结构，这里我用一个简单的数据示例：

const treeData = [
  {
    id: 1,
    name: '中国',
    children: [
      {
        id: 2,
        name: '北京',
        children: [
          {
            id: 3,
            name: '朝阳区'
          },
          {
            id: 4,
            name: '海淀区'
          }
        ]
      },
      {
        id: 5,
        name: '上海',
        children: [
          {
            id: 6,
            name: '浦东新区'
          },
          {
            id: 7,
            name: '徐汇区'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: '美国',
    children: [
      {
        id: 9,
        name: '纽约',
        children: [
          {
            id: 10,
            name: '曼哈顿'
          },
          {
            id: 11,
            name: '布鲁克林'
          }
        ]
      },
      {
        id: 12,
        name: '旧金山',
        children: [
          {
            id: 13,
            name: '金门公园'
          },
          {
            id: 14,
            name: '旧金山湾'
          }
        ]
      }
    ]
  }
]

接着，我们可以创建一个 Vue 组件来表示每一个节点：

<template>
  <div>
    <span>{{ node.name }}</span>
    <ul v-if="node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :keyword="keyword"
        @search="search"
      ></tree-node>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  methods: {
    search(keyword) {
      this.$emit('search', keyword)
    }
  }
}
</script>

在上面的代码中，我们使用递归组件来自动渲染子节点。每个节点包含一个名称和一个子节点数组，可以通过 props 来传递。同时，我们还添加了一个名为 `keyword` 的 prop 用于接收搜索关键字。在组件内部，我们使用 `v-if` 指令来判断是否存在子节点，并使用 `v-for` 指令循环渲染子节点。

接下来，我们需要在页面中添加一个搜索框和一个搜索结果展示区：

<template>
  <div>
    <div>
      <input type="text" v-model="searchKeyword" />
      <button @click="search">搜索</button>
    </div>
    <div v-if="searchResult.length">
      <ul>
        <li v-for="node in searchResult" :key="node.id">
          {{ node.name }}
        </li>
      </ul>
    </div>
    <div v-else>未找到匹配节点</div>
    <div>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
        :keyword="searchKeyword"
        @search="search"
      ></tree-node>
    </div>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  name: 'TreeSearch',
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        // 树形结构数据
      ],
      searchKeyword: '',
      searchResult: []
    }
  },
  methods: {
    search() {
      this.searchResult = []
      this.treeData.forEach(node => {
        this.searchNode(node)
      })
    },
    searchNode(node) {
      if (node.name.includes(this.searchKeyword)) {
        this.searchResult.push(node)
      }
      if (node.children) {
        node.children.forEach(child => {
          this.searchNode(child)
        })
      }
    }
  }
}
</script>

在上面的代码中，我们首先引入了之前定义的 `TreeNode` 组件，并使用 `v-for` 指令循环渲染树形结构。同时，我们添加了一个搜索框和一个搜索按钮，用户可以输入关键字并点击按钮进行搜索。在搜索方法中，我们使用 `Array.prototype.forEach()` 方法遍历整个树形结构，并递归搜索每个节点，如果节点的名称包含关键字，则将该节点添加到搜索结果列表中。最后，我们在页面中使用 `v-if` 指令来判断是否存在搜索结果，并使用 `v-for` 指令渲染搜索结果列表。

这样，一个简单的树形搜索功能就实现了。你可以根据自己的需求进行修改和扩展。