vue实现多条件查询
Vue 实现多条件查询的方法
数据绑定与表单设计
在 Vue 中实现多条件查询，通常需要结合 v-model 实现表单数据的双向绑定。例如，创建一个包含多个输入条件的表单：
<template>
<div>
<input v-model="queryParams.keyword" placeholder="关键词">
<select v-model="queryParams.category">
<option value="">全部</option>
<option value="1">分类1</option>
</select>
<input type="date" v-model="queryParams.startDate">
<button @click="handleSearch">查询</button>
</div>
</template>定义查询参数与响应式数据
在 Vue 组件的 data 或 setup 中定义查询参数的响应式对象：
data() {
return {
queryParams: {
keyword: '',
category: '',
startDate: ''
},
resultList: []
}
}实现查询逻辑
通过方法触发查询，可以调用 API 或本地过滤数据：
methods: {
handleSearch() {
// 过滤空值参数（可选）
const params = Object.fromEntries(
Object.entries(this.queryParams).filter(([_, v]) => v !== '')
)
// 调用API或本地过滤
api.getList(params).then(res => {
this.resultList = res.data
})
}
}本地数据过滤示例
如果数据已加载到前端，可使用 computed 实现实时过滤：
computed: {
filteredList() {
return this.originalList.filter(item => {
return (
(this.queryParams.keyword === '' ||
item.name.includes(this.queryParams.keyword)) &&
(this.queryParams.category === '' ||
item.category === this.queryParams.category)
)
})
}
}使用第三方库优化
对于复杂查询条件，可考虑使用 Lodash 的 _.filter 或 _.debounce 实现防抖：
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function() {
// 查询逻辑
}, 500)
}路由参数同步
若需将查询条件反映在 URL 中，可通过 Vue Router 实现：
watch: {
queryParams: {
deep: true,
handler(newVal) {
this.$router.push({ query: newVal })
}
}
}注意事项
- 对于大量数据，建议使用分页查询而非一次性加载
- 日期范围等复杂条件需特殊处理格式转换
- 移动端需注意输入控件的用户体验优化
