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

Question

如果可能，如何将筛选器与'regular'search属性一起应用于Vuetifyv-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' },
],

但我想用一组复选框控制"类别"列上的过滤器(完全匹配(。有一种东西叫做"custom-filter"，但文档中并没有详细介绍。

这看起来是同一个问题(未回答(：如何在vuetify中为数据表添加单独的过滤器？

Answer 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的标头上的任何内容。