v-data-iteratorコンポーネントはデータの表示に使用され、その機能の大部分をv-data-tableコンポーネントと共有します。機能にはソート、検索、ページネーション、および選択が含まれます。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
Itemをfilterするための関数
Itemsをgroup化するために使われる関数
Itemsをsortするために使われる関数
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
Filterを完全に無効化します。
Paginationを完全に無効化します。
Sortingを完全に無効化します。
拡張されたitemsのarrayです。 .sync 修飾子と一緒に使うことができます。
詳細は、v-data-footer APIを参照してください。
項目のグループ化に使用する項目プロパティを変更します。現在は単一のグループ化のみをサポートしています。groupまたは['group']の形式での単一のグループ化のみをサポートしています。配列を使用する場合は、最初の要素のみを考慮します。.sync 修飾子と一緒に使用することができます。
グループ化する方向を変更します。.sync 修飾子と一緒に使用できます。
デフォルトのfooterを隠します。
各itemでユニークキーとして使われるプロパティ。
表示されるitemsのarray。
ページごとに表示する項目の数を変更します。.sync修飾子と一緒に使うことができます。
コンポーネントにlightテーマを適用します。
もしtrueにして、itemsが設定されなかった場合、ここに設定したローディングテキストが表示されます。
loadingがtrueで、itemsが何も設定されなかった場合に表示されるテキスト。
コンポーネントのロケールを設定します。内部テキスト文字列の翻訳に使用されます。
true の場合、複数のプロパティでソートすることができます。
true の場合、ソートを無効にすることはできず、常に昇順と降順を切り替えます。
コンポーネントにアイテムが提供されていない場合に表示されるテキスト。
search propが使われ、結果が得られなかった場合に表示されるテキスト。
A combined object for options. See example below for definition. Can be used with .sync modifier
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}アイテムのどのページを表示するかを変更します。.sync 修飾子と一緒に使うことができます。
Itemsをフィルタリングするために使用されるテキスト入力
選択可能かどうかを判断するために使用される各項目のプロパティ。
Used only when data is provided by a server. Should be set to the total amount of items available on server so that pagination works correctly
Changes expansion mode to single expand
Changes selection mode to single select
どの項目プロパティ（またはプロパティ群）をソート順に使用するかを変更します。.sync 修飾子と一緒に使うことができます。
ソートする方向を変更します。.sync 修飾子と一緒に使うことができます。
選択された行を制御するために使用します。
デフォルトのスロット。これを使用してアイテムをレンダリングします。
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}Defines a footer below the items
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}This slot is forwarded to the default footer. See the v-data-footer API for more information
{
pageStart: number
pageStop: number
itemsLength: number
}{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}Slot for each item
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
}loading が true で、itemsが何も設定されなかった場合のコンテンツを定義します。
itemsが提供されない場合のコンテンツを定義します
search が提供されているが、結果が見つからない場合のコンテンツを定義します。
現在のページのアイテム
any[]選択した項目の配列
any[]項目が展開または閉じられたときに発生するイベント
{ item: any, value: boolean }アイテムが選択または選択解除されたときに発生するイベント
{ item: any, value: boolean }総ページ数
number現在のページネーションに関する情報
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}{ items: any[], value: boolean }expandedプロパティの.syncイベント
any[]group-byプロパティの.syncイベント
string | string[]group-descプロパティの.syncイベント
boolean | boolean[]items-per-pageプロパティの.syncイベント
numbermulti-sortプロパティの.syncイベント
booleanmust-sortプロパティの.syncイベント
boolean現在のオプションに関する情報
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}pageプロパティの.syncイベント
numbersort-byプロパティの.syncイベント
string | string[]sort-descプロパティの.syncイベント
boolean | boolean[]map-deep-get($headings, 'caption', 'size') !default;7px !default;7px !default;0 8px !default;32px !default;24px !default;14px !default;34px !default;13px !default;map-deep-get($headings, 'caption', 'size') !default;