Data iterator

v-data-iterator コンポーネントはデータを表示するために使用され、v-data-table コンポーネントと主要な機能を共有します。ソート、検索、ページネーション、選択の機能を含みます。

Usage

The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid list with cards. We can use the content-tag prop (along with content-class and content-props) to specify what the wrapper element around the items should look like.

API

props
slots
scoped Slots
events
v-data-iterator
Name
content-class
Default
undefined
Type
string

項目のラッパー要素にカスタムクラスを適用します。

Name
content-props
Default
undefined
Type
object

項目のラッパー要素にカスタムPropを適用します。

Name
content-tag
Default
'div'
Type
string

項目のラッパー要素に使用するタグを決定します。

Name
custom-filter
Default
(items: object[], search: string, filter: Filter): object[]
Type
function

Components.DataIterator.

Name
custom-sort
Default
(items: object[], index: number, isDescending: boolean): object[]
Type
function

Components.DataIterator.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disable-initial-sort
Default
false
Type
boolean

Components.DataIterator.

Name
expand
Default
false
Type
boolean

Components.DataIterator.

Name
filter
Default
(val: object, search: string): boolean
Type
function

Components.DataIterator.

Name
hide-actions
Default
false
Type
boolean

Components.DataIterator.

Name
item-key
Default
'id'
Type
string

Components.DataIterator.

Name
items
Default
[]
Type
array

Components.DataIterator.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
must-sort
Default
false
Type
boolean

Components.DataIterator.

Name
next-icon
Default
'$vuetify.icons.next'
Type
string

Components.DataIterator.

Name
no-data-text
Default
'$vuetify.noDataText'
Type
string

Components.DataIterator.

Name
no-results-text
Default
'$vuetify.dataIterator.noResultsText'
Type
string

Components.DataIterator.

Name
pagination.sync
Default
Type
object

Components.DataIterator.

{
  descending: boolean",
  page: number",
  rowsPerPage: number // -1 for All",
  sortBy: string",
  totalItems: number"
}
Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string

Components.DataIterator.

Name
rows-per-page-items
Default
[5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}]
Type
array

Components.DataIterator.

Name
rows-per-page-text
Default
'$vuetify.dataIterator.rowsPerPageText'
Type
string

Components.DataIterator.

Name
search
Default
undefined
Type
any

Components.DataIterator.

Name
select-all
Default
undefined
Type
boolean | string

Components.DataIterator.

Name
total-items
Default
undefined
Type
number

Components.DataIterator.

Name
value
Default
[]
Type
array

Components.DataIterator.

Examples

Slots

The v-data-iterator has both a header and footer slot for adding extra content

Expand

v-data-iterator can leverage the power of the expand prop and props.expanded inside the item slot to control the visibility of item data.

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore