Vuetify 数据表，如何应用外部过滤器？答案

【问题标题】：Vuetify data-table, how to apply external filters?Vuetify 数据表，如何应用外部过滤器？
【发布时间】：2020-02-20 23:45:22
【问题描述】：

如果可能的话，如何将过滤器与“常规”search 属性一起应用于 Vuetify v-data-table？

遵循 Vuetify 示例 (https://vuetifyjs.com/en/components/data-tables) ，考虑一个包含两列的 Vuetify 数据表：

甜点
类别

我想用搜索框控制表格，链接到“甜点”列：

        <v-data-table
          :headers="headers"
          :items="desserts"
          :search="search"
        ></v-data-table>

和：

    headers: [
      { text: 'Dessert (100g serving)', value: 'name' },
      { text: 'Category', value: 'category' },
    ],

但我想使用一组复选框（完全匹配）来控制 Category 列上的过滤器。有“custom-filter”这样的东西，但文档不是很详细。

这似乎是同一个问题（未回答）：How to add individual filters for data-table in vuetify?

【问题讨论】：

标签： vuetify.js

【解决方案1】：

原来它实际上很简单！过滤器在 headers 属性中定义。

html元素不需要修改：

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
></v-data-table>

标题被移动到计算部分并定义如下：

computed: {
  headers() {
    return [ { text: 'Dessert (100g serving)', value:'name' }
           , { text: 'Category', value: 'category', filter: value => {
                  return this.array_of_matches.indexOf(value) !== -1
                },
             }
           ]
  }

其中array_of_matches 是一个包含搜索项列表的变量。您可以选择添加这样的大小写转换内容： value.toString().toLocaleUpperCase()

“常规”搜索不会匹配已定义 filter 的标头上的任何内容。

【讨论】：