問題タブ [v-data-table]

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

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

出発点として(codepen を参照) 、 trueを返すだけのカスタム フィルターを用意しました。

と

car列のフィルターがすべての行に一致するため、入力した検索文字列に関係なく、テーブル全体が表示されると予想していました。

私が観察したのは、テーブルはまだフィルタリングされていますが、列countryによってのみフィルタリングされていることです。

逆に、フィルターを変更してfalseを返すと、空のテーブルが表示されます。私は、テーブルが列countryによってのみフィルタリングされることを期待していました。

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

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

そのため、データテーブルの列を動的に変更しています。たとえば、S1、S2、S3 値の列です。そして、セルにチェックボックスを入れたいのですが、名前の値があるので、すべてではありません。どうすれば動的に作成できます<template v-slot:item.S1="item">か<template v-slot:item.S2="item">...

返信ありがとうございます！

目標：

カスタム検索をv-data-table列ごとにどのフィルターに追加するかを計画しています。たとえば、テーブルがある場合

andヘッダーに を追加して、これら 2 つの列でカスタム フィルタリングを有効v-text-fieldにしたいと考えています。NameAge

現在のセットアップ:

v-data-tableこれは、テンプレートなどを追加することで簡単に実現できます。

問題：

このソリューションは機能しますが、まったく見栄えがよくありません。
これはcodepen での外観 です。明らかにわかるように、フォントはデフォルトのヘッダーよりも大きく、「ソート矢印」は 1 行下に移動しています。

今、カスタムv-text-fieldヘッダーを他のデフォルト ヘッダーのように見せる方法を探しています。
スタイリングには css を使用する必要があると思いますが、確信が持てません。
正しい方向へのポインタは大歓迎です! ☺</p>