Question

如何（如果有可能）结合“常规” v-data-table属性将过滤器应用于Vuetify search？

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

甜点
类别

我想用链接到“ Dessert”列的搜索框来控制表格：

        <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之类的东西，但是文档对此并不十分详细。

这似乎是相同的问题（未回答）：How to add individual filters for data-table in 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的标头上的任何内容都不匹配。

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

1 个答案: