vue实现多组筛选条件
Vue 实现多组筛选条件的方法
数据绑定与筛选逻辑
在Vue中实现多组筛选条件通常需要结合v-model绑定表单元素和数据属性。创建一个filters对象存储所有筛选条件，通过计算属性动态过滤数据。
data() {
return {
items: [], // 原始数据
filters: {
category: '',
priceRange: [0, 100],
keyword: ''
}
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
return (
(!this.filters.category || item.category === this.filters.category) &&
(item.price >= this.filters.priceRange[0] &&
item.price <= this.filters.priceRange[1]) &&
(!this.filters.keyword ||
item.name.includes(this.filters.keyword))
)
})
}
}动态渲染筛选组件
通过v-for动态生成多组筛选条件，适合不确定筛选字段数量的场景。结合v-model实现双向绑定。
<div v-for="filter in filterConfigs" :key="filter.field">
<label>{{ filter.label }}</label>
<select v-if="filter.type === 'select'" v-model="filters[filter.field]">
<option value="">All</option>
<option v-for="opt in filter.options" :value="opt">{{ opt }}</option>
</select>
<input v-else-if="filter.type === 'text'"
v-model="filters[filter.field]"
:placeholder="filter.placeholder">
</div>使用watch处理复杂逻辑
当筛选条件间存在依赖关系时，使用watch监听变化并处理联动逻辑。
watch: {
'filters.category'(newVal) {
if (newVal === 'electronics') {
this.filters.priceRange = [100, 1000]
}
}
}封装可复用筛选组件
创建独立的筛选组件提高复用性，通过props接收配置，$emit触发变化。
<!-- FilterComponent.vue -->
<template>
<div>
<slot name="header"></slot>
<input
v-model="localValue"
@input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
return {
localValue: this.modelValue
}
},
watch: {
modelValue(newVal) {
this.localValue = newVal
}
}
}
</script>使用Vuex管理筛选状态
在大型应用中，使用Vuex集中管理筛选状态更合适。
// store.js
state: {
filters: {}
},
mutations: {
UPDATE_FILTER(state, { key, value }) {
state.filters[key] = value
}
}
// 组件中使用
methods: {
updateFilter(payload) {
this.$store.commit('UPDATE_FILTER', payload)
}
}性能优化技巧
对于大数据量筛选，使用防抖函数减少计算频率。
import { debounce } from 'lodash'
computed: {
filteredItems: debounce(function() {
return heavyFilteringLogic(this.items, this.filters)
}, 300)
}响应式布局实现
结合CSS Grid或Flexbox实现响应式筛选栏布局，适应不同屏幕尺寸。
.filter-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}通过以上方法可以实现灵活、高效的多组筛选功能，根据具体需求选择适合的方案组合。注意保持筛选逻辑与视图分离，便于维护和扩展。
