当前位置：首页 > VUE

vue实现多项查询

2026-03-10 10:04:57VUE

Vue 实现多项查询的方法

在 Vue 中实现多项查询功能通常涉及表单绑定、数据筛选和状态管理。以下是几种常见的方法：

使用 v-model 绑定表单输入

通过 v-model 绑定多个查询字段到 Vue 的数据对象，实现双向数据绑定。

vue实现多项查询

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

<script>
export default {
  data() {
    return {
      queryParams: {
        name: '',
        age: '',
        gender: ''
      },
      items: []
    }
  },
  methods: {
    search() {
      // 过滤逻辑
      this.filteredItems = this.items.filter(item => {
        return (
          (this.queryParams.name === '' || item.name.includes(this.queryParams.name)) &&
          (this.queryParams.age === '' || item.age === Number(this.queryParams.age)) &&
          (this.queryParams.gender === '' || item.gender === this.queryParams.gender)
        )
      })
    }
  }
}
</script>

使用计算属性实现实时筛选

利用计算属性自动响应数据变化，无需手动触发查询。

<template>
  <div>
    <input v-model="filters.name" placeholder="姓名">
    <input v-model="filters.age" placeholder="年龄" type="number">
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        age: ''
      },
      allItems: []
    }
  },
  computed: {
    filteredItems() {
      return this.allItems.filter(item => {
        return (
          (this.filters.name === '' || item.name.includes(this.filters.name)) &&
          (this.filters.age === '' || item.age === Number(this.filters.age))
        )
      })
    }
  }
}
</script>

结合 Vuex 管理查询状态

对于大型应用，可以使用 Vuex 集中管理查询状态。

vue实现多项查询

// store.js
const store = new Vuex.Store({
  state: {
    queryParams: {
      name: '',
      age: ''
    },
    items: []
  },
  mutations: {
    updateQueryParams(state, payload) {
      state.queryParams = { ...state.queryParams, ...payload }
    }
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item => {
        return (
          (state.queryParams.name === '' || item.name.includes(state.queryParams.name)) &&
          (state.queryParams.age === '' || item.age === Number(state.queryParams.age))
        )
      })
    }
  }
})

使用第三方库增强功能

对于复杂查询，可以考虑使用 Lodash 的 _.filter 或 Fuse.js 等库实现模糊搜索。

import Fuse from 'fuse.js'

const fuse = new Fuse(this.items, {
  keys: ['name', 'age'],
  threshold: 0.4
})

this.filteredItems = fuse.search(this.queryParams.name)

分页处理查询结果

对于大量数据，结合分页组件优化性能。

<template>
  <div>
    <input v-model="queryParams.keyword" placeholder="关键词">
    <button @click="search">查询</button>
    <div v-for="item in paginatedItems" :key="item.id">
      {{ item.name }}
    </div>
    <pagination 
      :total="filteredItems.length" 
      :current="currentPage"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: { keyword: '' },
      currentPage: 1,
      pageSize: 10,
      allItems: []
    }
  },
  computed: {
    filteredItems() {
      return this.allItems.filter(item => 
        item.name.includes(this.queryParams.keyword)
      )
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.filteredItems.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>