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;
}

通过以上方法可以实现灵活、高效的多组筛选功能，根据具体需求选择适合的方案组合。注意保持筛选逻辑与视图分离，便于维护和扩展。