tree模糊搜索实现vue
实现 Vue 中的 Tree 模糊搜索
在 Vue 中实现 Tree 组件的模糊搜索功能，通常需要结合递归组件、过滤算法和动态渲染。以下是具体实现方法：
递归组件结构
定义一个递归的 Tree 组件，支持嵌套节点渲染。基本结构如下：
<template>
<div>
<input v-model="searchText" placeholder="搜索节点" />
<tree-node :node="filteredTree" />
</div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: { TreeNode },
data() {
return {
searchText: '',
treeData: [
{
label: 'Node 1',
children: [
{ label: 'Child 1' },
{ label: 'Child 2' }
]
}
]
}
},
computed: {
filteredTree() {
return this.filterNodes(this.treeData, this.searchText)
}
},
methods: {
filterNodes(nodes, searchText) {
if (!searchText) return nodes
return nodes.filter(node => {
const match = node.label.toLowerCase().includes(searchText.toLowerCase())
if (node.children) {
node.children = this.filterNodes(node.children, searchText)
return match || node.children.length > 0
}
return match
})
}
}
}
</script>递归节点组件
创建单独的 TreeNode 组件处理递归渲染：
<template>
<ul>
<li v-for="node in node.children" :key="node.label">
{{ node.label }}
<tree-node v-if="node.children" :node="node" />
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
node: Object
}
}
</script>性能优化
对于大型树结构，可以采用以下优化措施：
- 添加防抖处理搜索输入
- 使用虚拟滚动只渲染可见节点
- 对树数据进行扁平化处理加速搜索
// 防抖实现示例
debounceSearch() {
clearTimeout(this.debounceTimer)
this.debounceTimer = setTimeout(() => {
this.filteredTree = this.filterNodes(this.treeData, this.searchText)
}, 300)
}样式增强
为匹配项添加高亮效果：
highlightText(text, search) {
if (!search) return text
const regex = new RegExp(`(${search})`, 'gi')
return text.replace(regex, '<span class="highlight">$1</span>')
}在模板中使用 v-html 渲染高亮文本：
<li v-for="node in node.children" :key="node.label">
<span v-html="highlightText(node.label, searchText)" />
</li>完整功能扩展
完整的 Tree 搜索组件还应考虑：
- 多级展开/折叠控制
- 复选框选择支持
- 异步加载子节点
- 自定义节点渲染插槽
这种实现方式保持了组件化的 Vue 开发模式，同时提供了灵活的搜索功能。根据具体需求，可以调整过滤算法或界面交互细节。
