Vue.js（BootstrapVue）表格多下拉筛选重置问题求助

Hey there! Let's break down what's happening and how to fix this. The issue you're running into is because BootstrapVue's built-in filter prop for <b-table> is designed to handle a single filter value. When you bind multiple dropdowns to this same prop, selecting a second option overwrites the first one—hence the reset.

You don't need to copy and rename the built-in filter function. Instead, we can create a combined filter system by maintaining separate filter criteria and applying them together to your data. Here's a step-by-step solution:

1. Set up your filter state #

First, create a data property to hold all your filter values (one for each dropdown). This keeps them separate instead of overwriting each other:

<script>
export default {
  data() {
    return {
      // Your original table data (match your actual data structure)
      items: [
        { id: 1, product: 'Laptop', category: 'Electronics', status: 'In Stock' },
        { id: 2, product: 'T-Shirt', category: 'Clothing', status: 'Out of Stock' },
        { id: 3, product: 'Headphones', category: 'Electronics', status: 'In Stock' },
        // ... more items
      ],
      // Separate filter criteria for each dropdown
      filters: {
        category: '', // Bind to your category dropdown
        status: ''    // Bind to your status dropdown
      }
    }
  }
}
</script>

2. Create a computed filtered dataset #

Next, make a computed property that applies all your filters to the original items array. This computed property will be what you pass to <b-table> instead of the raw items:

<script>
export default {
  // ... data from above
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        // Check category filter: if empty, skip filtering this field
        const matchesCategory = !this.filters.category || item.category === this.filters.category;
        // Check status filter: same logic
        const matchesStatus = !this.filters.status || item.status === this.filters.status;
        
        // Only keep items that match ALL active filters
        return matchesCategory && matchesStatus;
      });
    }
  }
}
</script>

3. Update your template #

Bind your dropdowns to the filters properties, and use the filteredItems computed property for your table:

<template>
  <div class="mb-3">
    <!-- Category Dropdown -->
    <b-form-select 
      v-model="filters.category" 
      class="mr-3"
      :options="['', 'Electronics', 'Clothing', 'Home Goods']"
    >
      <template #first>Select Category</template>
    </b-form-select>

    <!-- Status Dropdown -->
    <b-form-select 
      v-model="filters.status" 
      :options="['', 'In Stock', 'Out of Stock', 'Backordered']"
    >
      <template #first>Select Status</template>
    </b-form-select>
  </div>

  <!-- Table using filtered data -->
  <b-table 
    :items="filteredItems" 
    :fields="['id', 'product', 'category', 'status']"
    striped hover
  ></b-table>
</template>

Alternative: Use BootstrapVue's filter-function #

If you prefer to use the table's built-in filtering mechanism instead of a computed property, you can use the filter-function prop. This lets you define a custom function that checks all your filters:

<template>
  <div class="mb-3">
    <!-- Same dropdowns as above -->
    <b-form-select v-model="filters.category" :options="['', 'Electronics', 'Clothing']" class="mr-3"></b-form-select>
    <b-form-select v-model="filters.status" :options="['', 'In Stock', 'Out of Stock']"></b-form-select>
  </div>

  <!-- Table with custom filter function -->
  <b-table 
    :items="items" 
    :fields="['id', 'product', 'category', 'status']"
    :filter-function="filterItems"
    striped hover
  ></b-table>
</template>

<script>
export default {
  // ... data from above
  methods: {
    filterItems(item) {
      const { category, status } = this.filters;
      const matchesCategory = !category || item.category === category;
      const matchesStatus = !status || item.status === status;
      return matchesCategory && matchesStatus;
    }
  }
}
</script>

Key Tips for Beginners: #

• Empty filter values: The checks like !this.filters.category ensure that if a dropdown is set to the default empty option, it won't filter that field at all.
• Flexible matching: If you need partial matches (e.g., searching for "Electro" should match "Electronics"), replace === with item.category.includes(this.filters.category).
• Scalability: Adding more dropdowns is easy—just add a new property to the filters object and update the filter checks in your computed property or filter function.

This approach keeps all your filters independent and applies them together—no need to mess with copying the built-in filter functionality!

内容的提问来源于stack exchange，提问作者nilsfl