Vuetify v-data-table自定义筛选下拉列表

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :custom-filter="customFilter"
  >
    <template v-slot:header="{ props }">
      <th v-for="header in props.headers" :key="header.text">
        {{ header.text }}
        <v-select
          v-if="header.value === 'category'"
          v-model="categoryFilter"
          :items="categories"
          label="Category"
          multiple
          chips
          small-chips
          outlined
          dense
        ></v-select>
      </th>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Category', value: 'category' },
        { text: 'Price', value: 'price' },
      ],
      items: [
        { name: 'Product 1', category: 'Category A', price: 10 },
        { name: 'Product 2', category: 'Category B', price: 20 },
        { name: 'Product 3', category: 'Category A', price: 30 },
      ],
      search: '',
      categoryFilter: [],
      categories: ['Category A', 'Category B'],
    };
  },
  computed: {
    customFilter(item) {
      if (this.categoryFilter.length === 0) {
        return true;
      }
      return this.categoryFilter.includes(item.category);
    },
  },
};
</script>