当前位置：首页 > VUE

vue实现菜单搜索

2026-03-29 00:26:06VUE

Vue 实现菜单搜索功能

数据准备

确保菜单数据以数组形式存储在 Vue 的 data 或 pinia/vuex 中，每个菜单项应包含可搜索的字段（如 title、path 等）。示例数据结构：

data() {
  return {
    menuItems: [
      { title: '首页', path: '/home' },
      { title: '用户管理', path: '/users' }
    ],
    searchQuery: ''
  }
}

实现搜索逻辑

使用计算属性实现实时搜索过滤，避免直接修改原始数据。通过 toLowerCase() 统一大小写提高搜索友好度：

computed: {
  filteredMenu() {
    return this.menuItems.filter(item => 
      item.title.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

模板渲染

在模板中使用 v-for 渲染过滤后的菜单，通过 v-model 绑定搜索输入框：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索菜单...">
    <ul>
      <li v-for="item in filteredMenu" :key="item.path">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

性能优化

对于大型菜单数据，可采用防抖处理（如 lodash.debounce）减少频繁计算：

import { debounce } from 'lodash'
methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

样式增强

添加视觉反馈，如无结果提示和搜索高亮：

<div v-if="filteredMenu.length === 0" class="no-results">无匹配菜单</div>

多字段搜索

支持多字段联合搜索时，扩展过滤逻辑：

vue实现菜单搜索

filteredMenu() {
  return this.menuItems.filter(item => {
    const query = this.searchQuery.toLowerCase()
    return (
      item.title.toLowerCase().includes(query) || 
      item.path.toLowerCase().includes(query)
    )
  })
}