1

v-data-table のカスタム フィルターに関する Vuetify ドキュメントによると、ヘッダー項目にフィルタープロパティを指定することで、特定のテーブル列のフィルター処理をカスタマイズできます。

私のアプリケーションでは、これを使用して単一の列のフィルタリングをカスタマイズしたいと考えています。他のすべての列については、デフォルトの文字列一致動作を維持したいと考えています。

出発点として(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によってのみフィルタリングされることを期待していました。

ヘッダー フィルターはどのように適用されますか? または、より正確には：

行ごとに、それぞれの列フィルターの結果をどのように組み合わせて、行全体のフィルター結果を生成しますか?

4

1 に答える 1

1

掘り下げた後、v-data-table フィルタリングに関するバグレポートでこの回答を見つけました。

この背後にある考え方はまだ理解できませんが、明らかに、カスタム列フィルターは、カスタム フィルターのない列とは異なる方法で処理されます。

行が一致するのは、(1)指定されたevery()カスタム列フィルターに一致し、(2) some()デフォルト フィルターに一致する (つまり、検索文字列を含む) 場合です。

Vuetify の一致するコードは次のようです。

  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
  })
于 2020-10-18T05:17:59.030 に答える