vue实现组合查询
Vue 实现组合查询
组合查询通常指用户通过多个条件筛选数据，Vue 可以通过数据绑定、计算属性和方法实现这一功能。以下是具体实现方式：
数据绑定与表单设计
在 Vue 组件的 data 中定义查询条件和数据列表：
data() {
return {
queryParams: {
name: '',
status: '',
dateRange: []
},
dataList: [] // 原始数据
}
}模板中使用 v-model 绑定表单输入：
<input v-model="queryParams.name" placeholder="名称">
<select v-model="queryParams.status">
<option value="">全部状态</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
<date-picker v-model="queryParams.dateRange" type="daterange"></date-picker>
<button @click="handleSearch">查询</button>实现筛选逻辑
通过计算属性或方法实现组合查询筛选：
computed: {
filteredList() {
return this.dataList.filter(item => {
const nameMatch = this.queryParams.name
? item.name.includes(this.queryParams.name)
: true
const statusMatch = this.queryParams.status !== ''
? item.status === this.queryParams.status
: true
const dateMatch = this.queryParams.dateRange.length === 2
? new Date(item.date) >= new Date(this.queryParams.dateRange[0]) &&
new Date(item.date) <= new Date(this.queryParams.dateRange[1])
: true
return nameMatch && statusMatch && dateMatch
})
}
}或者使用方法触发查询：
methods: {
handleSearch() {
this.filteredList = this.dataList.filter(item => {
// 同上筛选逻辑
})
}
}优化性能
对于大数据量查询，可以添加防抖处理：
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function() {
// 查询逻辑
}, 500)
}使用第三方库
对于复杂查询场景，可以考虑使用 Vue 插件如 vue-search-select 或 vue-multiselect 增强查询功能。
注意事项
- 日期比较需确保格式一致
- 空值处理要考虑业务逻辑
- 敏感字符需转义防止 XSS 攻击
- 移动端需优化输入体验
以上方法可根据实际业务需求调整组合条件和筛选逻辑。
