当前位置：首页 > VUE

vue 实现条件搜索

2026-02-11 03:25:44VUE

实现条件搜索的基本思路

在Vue中实现条件搜索通常涉及以下几个核心步骤：绑定表单输入、监听搜索条件变化、过滤数据列表。以下是一个典型的实现方案。

绑定搜索表单

创建包含搜索条件的表单元素，使用v-model双向绑定到Vue实例的数据属性。例如搜索名称和状态：

vue 实现条件搜索

<template>
  <div>
    <input v-model="searchQuery.name" placeholder="搜索名称">
    <select v-model="searchQuery.status">
      <option value="">全部状态</option>
      <option value="active">活跃</option>
      <option value="inactive">未活跃</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: {
        name: '',
        status: ''
      }
    }
  }
}
</script>

计算属性过滤数据

使用计算属性实时过滤数据列表，避免直接修改原始数据。计算属性会根据依赖自动更新：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(
        this.searchQuery.name.toLowerCase()
      )
      const statusMatch = this.searchQuery.status === '' || 
        item.status === this.searchQuery.status
      return nameMatch && statusMatch
    })
  }
}

使用watch处理复杂逻辑

当搜索条件变化需要异步操作时，可以使用watch监听搜索条件：

vue 实现条件搜索

watch: {
  searchQuery: {
    handler(newVal) {
      this.debouncedSearch()
    },
    deep: true
  }
},
methods: {
  debouncedSearch: _.debounce(function() {
    this.fetchSearchResults()
  }, 500),
  fetchSearchResults() {
    // 调用API获取搜索结果
  }
}

服务端搜索实现

对于大量数据，建议实现服务端搜索，减少客户端压力：

methods: {
  async performSearch() {
    const params = {
      name: this.searchQuery.name,
      status: this.searchQuery.status
    }
    const response = await axios.get('/api/items', { params })
    this.filteredItems = response.data
  }
}

优化搜索体验

添加加载状态和空结果提示提升用户体验：

<template>
  <div>
    <div v-if="loading">搜索中...</div>
    <div v-else-if="filteredItems.length === 0">无匹配结果</div>
    <ul v-else>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} - {{ item.status }}
      </li>
    </ul>
  </div>
</template>