Vuetify 数据表，如何应用外部过滤器? [英] Vuetify data-table, how to apply external filters?

问题描述

如果可能的话，如何将过滤器应用于 Vuetify v-data-table，并结合常规"search 属性?

How, if at all possible, to apply a filter to a Vuetify v-data-table, in conjunction with the 'regular' search property?

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

Following the Vuetify example (https://vuetifyjs.com/en/components/data-tables) , consider a Vuetify data-table with two columns:

• 甜点
• 类别

我想用搜索框控制表格，链接到甜点"列:

I want to control the table with a search box, linked to the "Dessert" column:

        <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"之类的东西，但文档对此不是很详细.

But I want to control a filter on the Category column with a group of checkboxes (exact match). There is such a thing as a "custom-filter", but the documentation is not very detailed on that.

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

This looks to be the same question (unanswered): How to add individual filters for data-table in vuetify?

推荐答案

事实证明其实很简单！过滤器在 headers 属性中定义.

Turns out it's actually quite simple! The filters are defined in the headers property.

无需更改 html 元素:

No changes required to the html element:

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

标题被移动到计算部分并像这样定义:

The headers are moved to the computed-section and defined like this:

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()

Where array_of_matches is a variable containing a list of search items. You may optionally want to add case conversion stuff like this: value.toString().toLocaleUpperCase()

常规"搜索不会匹配定义了此类 filter 的标头上的任何内容.

The 'regular' search won't match anything on a header that has such a filter defined.

这篇关于Vuetify 数据表，如何应用外部过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！