# Data tables

v-data-table コンポーネントは表形式データを表示するために使用されます。 ソート、検索、ページネーション、コンテンツ編集、行選択などの機能があります。

# 使い方

データ テーブルは、デフォルトではデータを単純な行として表示します。

# API

# サンプル

# Props

# カスタムフィルター

custom-filter prop に関数を提供することで、 search prop で使用されるデフォルトのフィルタリングをオーバーライドできます。 特定の列のフィルタリングをカスタマイズする必要がある場合は、ヘッダーアイテムの filter プロパティに関数を指定できます。 シグネチャは (value: any, search: string | null, item: any) => boolean です。 search prop が提供されていない場合でも、この関数は常に実行されます。 したがって、フィルタを適用しない場合は true の値で早期に終了するようにしてください。

# Dense

dense プロパティを使用すると、データテーブルに別のスタイルを与えることができます。

# Filterable

ヘッダー項目のプロパティ filterable を false に設定することで、テーブル行を検索する際に特定の列が含まれることを簡単に無効にできます。 下の例では、デザート名列は検索できなくなりました。

# グループ化

group-bygroup-desc プロパティを使用して、itemプロパティで行をグループ化できます。 show-group-by prop はデフォルトヘッダにグループボタンを表示します。 ヘッダー項目に groupable プロパティを使用して、グループボタンを無効にできます。

# デフォルトのヘッダーとフッターを非表示にする

hide-default-header および hide-default-footer プロパティを適用して、デフォルトのヘッダーとフッターをそれぞれ削除できます。

# Loading

loading prop を使用して、テーブル内のデータが現在ロードされていることを示すことができます。 テーブルにデータがない場合は、ローディングメッセージも表示されます。 このメッセージは、 loading-text プロパティまたは loading スロットを使用してカスタマイズできます。

# Multi sort

multi-sort プロパティを使用すると、複数の列を同時に並べ替えることができます。 有効にすると、 sort-bysort-desc の両方に配列を渡して、単一値ではなくプログラムでソートを制御できます。

# 行の選択

show-select プロパティ は、デフォルトヘッダーのチェックボックスを表示します。すべての行と各デフォルト行のチェックボックスを切り替えられるようになります。 スロット header.data-table-selectitem.data-table-select でこれらをカスタマイズできます。 同時に複数選択を許可するか、 single-select プロパティを使用するかを切り替えることもできます。

# Slots

v-data-tableには、テーブルをカスタマイズするための多数のスロットが用意されています。 この例では、これらのスロットのいくつかと、それぞれで何ができるかを紹介します。 いくつかのスロット(例: item/body/header)は、コンポーネントの内部レンダリングを完全に引き継ぐので、選択や展開などの機能を再実装する必要があることに注意してください。 いくつかのスロットは、body > item > item.<name>header/header.<name> のように、互いにオーバーライドされます。

# ヘッダー

動的スロット header.<name> を使用して、特定の列だけをカスタマイズすることができます。 <name> は、 headers に送信される対応するヘッダー項目のvalueプロパティの名前です。

# Item

動的スロット item.<name> を使用して、特定の列だけをカスタマイズすることができます。 <name> は、 headers に送信される対応するヘッダー項目のvalueプロパティの名前です。 カロリー列をカスタマイズするには、 item.calories スロットを使用します。

# 単純なチェックボックス

データテーブルのスロットテンプレート内のチェックボックスコンポーネントを使用する場合。 v-checkbox コンポーネントではなく、v-simple-checkbox コンポーネントを使用します。 v-simple-checkbox コンポーネントは内部で使用されており、ヘッダーの配置を考慮します。

# その他

# CRUD アクション

各行を編集するためにv-dialogコンポーネントを使用した、CRUD アクション付きv-data-table のサンプルです。

# Edit dialog

v-edit-dialog コンポーネントは、 v-data-table 内で直接データを編集するために使用できます。 v-edit-dialog の外側をクリックしたときに閉じないようにするためには persistent プロパティを追加します。

# 展開可能な行

show-expand propは、各行に展開アイコンを表示します。 item.data-table-expand スロットでカスタマイズできます。 このスロットの位置は、ヘッダー用配列にvalue: 'data-table-expand' カラムを追加することでカスタマイズできます。 同時に複数展開を許可するか、 各行ごとのsingle-expand propを使用するかを切り替えることもできます。 展開された行は expanded.sync プロパティで利用できます。 行アイテムは、展開を機能させるために一意のキープロパティを必要とします。 デフォルトは idですが、 item-key プロパティを使用して別の項目プロパティを指定することができます。

# 外部ページネーション

ページネーションは、個々の props を使用するか options プロパティを使用することで、外部から制御できます。 .sync 修飾子を適用する必要があります。

# 外部ソート

ソートは、個々の props を使用するか、options プロパティを使用して外部で制御することもできます。 .sync 修飾子を適用する必要があります。

# サーバ・サイドのページネーションとソート

バックエンドからあらかじめページ分割されソートされたデータをロードする場合、server-items-length プロパティを使うことができます。 このプロパティを定義すると、組み込みのソートとページネーションが無効になり、バックエンドから新しいページを要求するタイミングを知るために、代わりに利用可能なイベント(update:page, update:sortBy, update:optionsなど)を使用する必要があります。 loading プロパティを使用すると、データの取得中にプログレスバーを表示します。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:06/19/2021, 4:17:28 PM