当前位置：首页 > VUE

tree模糊搜索实现vue

2026-02-22 20:31:06VUE

实现 Vue 中的 Tree 模糊搜索

在 Vue 中实现 Tree 组件的模糊搜索功能，可以通过过滤树节点数据来实现。以下是一个完整的实现方法：

核心思路

递归遍历树结构，检查每个节点的 label 是否包含搜索关键词
如果节点匹配，保留该节点及其所有父节点
对于不匹配的节点，检查其子节点是否有匹配项

实现代码

<template>
  <div>
    <input v-model="searchText" placeholder="输入搜索内容" />
    <el-tree
      :data="filteredTreeData"
      :props="defaultProps"
      node-key="id"
      default-expand-all
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            { id: 4, label: '二级 1-1', children: [] }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            { id: 5, label: '二级 2-1', children: [] },
            { id: 6, label: '二级 2-2', children: [] }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    filteredTreeData() {
      if (!this.searchText) return this.treeData
      return this.filterTree(this.treeData, this.searchText.toLowerCase())
    }
  },
  methods: {
    filterTree(nodes, searchText) {
      return nodes.filter(node => {
        const match = node.label.toLowerCase().includes(searchText)
        if (node.children && node.children.length) {
          const filteredChildren = this.filterTree(node.children, searchText)
          if (filteredChildren.length) {
            node.children = filteredChildren
            return true
          }
        }
        return match
      })
    }
  }
}
</script>

性能优化

对于大型树结构，可以考虑以下优化措施：

添加防抖处理搜索输入
使用虚拟滚动只渲染可见节点
对树数据进行扁平化处理加速搜索

// 防抖实现示例
import { debounce } from 'lodash'

watch: {
  searchText: debounce(function(newVal) {
    this.searchText = newVal
  }, 300)
}

扩展功能

高亮匹配的文本
支持多字段搜索
添加搜索结果的统计信息

// 高亮匹配文本示例
highlightText(label, searchText) {
  if (!searchText) return label
  const reg = new RegExp(`(${searchText})`, 'gi')
  return label.replace(reg, '<span style="color: red">$1</span>')
}