vue 组合筛选

Vue 组合筛选可以通过多个筛选条件的组合来实现更精细的数据筛选。以下是一个简单的实现：

1. 在 Vue 组件中定义一个包含筛选条件的对象，例如：

data() {
  return {
    filters: {
      keyword: '',
      category: '',
      priceRange: ''
    },
    products: [
      { name: 'product1', category: 'category1', price: 10 },
      { name: 'product2', category: 'category2', price: 20 },
      { name: 'product3', category: 'category1', price: 30 },
      { name: 'product4', category: 'category3', price: 40 },
      { name: 'product5', category: 'category2', price: 50 },
    ]
  }
}

2. 在模板中添加筛选条件的输入框和按钮，例如：

<div>
  <input type="text" v-model="filters.keyword" placeholder="search product">
  <select v-model="filters.category">
    <option value="">All Categories</option>
    <option value="category1">Category1</option>
    <option value="category2">Category2</option>
    <option value="category3">Category3</option>
  </select>
  <select v-model="filters.priceRange">
    <option value="">All Prices</option>
    <option value="0-20">$0-$20</option>
    <option value="20-40">$20-$40</option>
    <option value="40-60">$40-$60</option>
  </select>
  <button @click="filterProducts">Filter</button>
</div>

3. 在组件中定义一个计算属性，用于根据筛选条件过滤数据，例如：

computed: {
  filteredProducts() {
    let products = this.products;
    if (this.filters.keyword) {
      products = products.filter(p => p.name.toLowerCase().includes(this.filters.keyword.toLowerCase()));
    }
    if (this.filters.category) {
      products = products.filter(p => p.category === this.filters.category);
    }
    if (this.filters.priceRange) {
      const [minPrice, maxPrice] = this.filters.priceRange.split('-');
      products = products.filter(p => p.price >= minPrice && p.price <= maxPrice);
    }
    return products;
  }
}

4. 在模板中显示过滤后的数据，例如：

<div>
  <div v-for="product in filteredProducts" :key="product.name">
    {{ product.name }} - {{ product.category }} - ${{ product.price }}
  </div>
</div>

这样就实现了一个基本的 Vue 组合筛选功能。你可以根据实际需求修改筛选条件和数据源。