Vuetify 数据表：如何应用标头过滤器功能

Question

根据 Vuetify 文档中的 v-data-table 中的自定义过滤器，可以通过在标题项上提供 filter 属性来自定义特定表列的过滤。

在我的应用程序中，我想使用它来自定义单个列的过滤。对于所有其他列，我想保留默认的字符串匹配行为。

作为起点（参见codepen），我提供了一个自定义过滤器，它只返回true：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      headers: [
        {
          text: 'Car Manufacturers',
          value: 'car',
          filter(){ return true }
        },
        {
          text: 'Country of Origin',
          value: 'country'
        }
      ],
      items: [
        { car: 'Honda', country: 'Japan' },
        { car: 'Audi', country: 'Germany' },
        { car: 'Ford', country: 'USA' }
      ],
      search: ''
    }
  },
})

和

<div id="app">
  <v-app>
    <v-container>
      <v-text-field
        label="Search"
        v-model="search"
      >
      </v-text-field>
      <v-data-table
        :headers="headers"
        :items="items"
        :search="search"
      >
      </v-data-table>
    </v-container>
  </v-app>
</div>

我现在预计，car列上的过滤器会匹配所有行，因此无论我输入什么搜索字符串，都会显示整个表格。

我观察到，表格仍然被过滤，但仅按列country。

相反，当我将过滤器更改为返回 false 时，会显示一个空表。然后我预计该表仅按列 country 进行过滤。

如何应用标头过滤器？或者，更准确地说：

对于每一行，各个列过滤器的结果如何组合以产生整行的过滤结果？

Answer 1

经过一番挖掘，我在有关 v-data-table 过滤的错误报告中找到了这个答案。

我仍然不明白这背后的想法，但显然，自定义列过滤器的处理方式与没有自定义过滤器的列不同：

行匹配，如果 (1) 它们匹配 every() 指定的自定义列过滤器并且 (2) 它们匹配 some() 默认过滤器（即包含搜索字符串）。

Vuetify中的匹配代码好像是this:

  return items.filter(item => {
    // Headers with custom filters are evaluated whether or not a search term has been provided.
    // We need to match every filter to be included in the results.
    const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))

    // Headers without custom filters are only filtered by the `search` property if it is defined.
    // We only need a single column to match the search term to be included in the results.
    const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))

    return matchesColumnFilters && matchesSearchTerm
  })

Answer 2

有点晚了，但对于那些仍然有问题的人，我必须将

filter-mode="union"

添加到我的数据表中

const headers = [
  {
    key: 'lastName',
    title: 'lastName',
    filter: (value: string, query: string) => {
      const normalizedValue = normalizeString(value.toString())
      const normalizedQuery = normalizeString(query.toString())

      return normalizedValue.toLowerCase().includes(normalizedQuery.toLowerCase())
    },
  },
]


 <VDataTable
  :sort-by="sortBy"
  :headers="headers"
  :items="items"
  ...
  :search="search"
  filter-mode="union"
 <VDataTable

有了这个，除了我的专栏上的特定过滤器之外，我的搜索也可以工作。