当前位置：首页 > VUE

vue实现多条件搜索

2026-01-22 09:01:04VUE

Vue 实现多条件搜索

数据绑定与表单设计

在 Vue 中实现多条件搜索，首先需要设计一个表单，绑定多个搜索条件到 data 对象。例如搜索用户时可能需要姓名、年龄、性别等条件：

<template>
  <div>
    <input v-model="searchParams.name" placeholder="姓名">
    <input v-model="searchParams.age" type="number" placeholder="年龄">
    <select v-model="searchParams.gender">
      <option value="">全部</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchParams: {
        name: '',
        age: '',
        gender: ''
      }
    }
  }
}
</script>

处理搜索逻辑

在 methods 中定义搜索方法，根据绑定参数过滤数据。如果是前端过滤，直接操作数组；若需后端接口，则发起请求。

vue实现多条件搜索

methods: {
  handleSearch() {
    // 前端过滤示例
    const filteredData = this.originalData.filter(item => {
      return (
        (this.searchParams.name === '' || item.name.includes(this.searchParams.name)) &&
        (this.searchParams.age === '' || item.age === Number(this.searchParams.age)) &&
        (this.searchParams.gender === '' || item.gender === this.searchParams.gender)
      )
    })
    this.filteredList = filteredData

    // 后端接口示例
    // axios.get('/api/users', { params: this.searchParams })
  }
}

使用计算属性优化

对于实时搜索场景，可以用计算属性自动响应条件变化，避免手动触发搜索。

computed: {
  filteredList() {
    return this.originalData.filter(item => {
      return (
        (this.searchParams.name === '' || item.name.includes(this.searchParams.name)) &&
        (this.searchParams.age === '' || item.age === Number(this.searchParams.age)) &&
        (this.searchParams.gender === '' || item.gender === this.searchParams.gender)
      )
    })
  }
}

防抖处理频繁搜索

当输入框实时触发搜索时，通过防抖函数（如 Lodash 的 _.debounce）减少请求频率。

vue实现多条件搜索

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 搜索逻辑
  }, 500)
}

清空条件功能

添加重置按钮，一键清空所有搜索条件。

<button @click="resetSearch">重置</button>

<script>
methods: {
  resetSearch() {
    this.searchParams = {
      name: '',
      age: '',
      gender: ''
    }
  }
}
</script>

结合 Vuex 管理状态

在大型项目中，搜索条件可能跨组件共享，建议使用 Vuex 集中管理状态。

// store.js
state: {
  searchParams: {}
},
mutations: {
  updateSearchParams(state, payload) {
    state.searchParams = { ...state.searchParams, ...payload }
  }
}

// 组件中
this.$store.commit('updateSearchParams', { name: 'John' })