The v-data-iterator component is used for displaying data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.
The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid with cards.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Fonction pour filtrer les éléments
Function used to group items
Fonction utilisée pour trier les éléments
Applique la variante du thème foncé au composant. Vous pouvez trouver plus d'informations sur la documentation Material Design pour thèmes sombres.
Désactiver complètement le filtrage
Désactiver complètement la pagination
Désactiver le tri complètement
Array of expanded items. Can be used with .sync modifier
See the v-data-footer API for more information
Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: group or ['group']. When using an array, only the first element is considered. Can be used with .sync modifier
Modifications du groupement de direction. Peut être utilisé avec le modificateur .sync
Hides default footer
The property on each item that is used as a unique key
Le tableau d'éléments à afficher
Modifie le nombre d'éléments par page. Peut être utilisé avec le modificateur .sync
Applique la variante claire du thème au composant.
If true and no items are provided, then a loading text will be shown
Text shown when loading is true and no items are provided
Définit la locale du composant. Utilisée pour traduire les chaînes de texte internes.
Si true alors on peut trier sur plusieurs propriétés
Si true alors on ne peut pas désactiver le tri, il basculera toujours entre ascendant et descendant
Text shown when no items are provided to the component
Text shown when search prop is used and there are no results
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
}Modifie quelle page d'éléments est affichée. Peut être utilisé avec le modificateur `.sync
Saisie de texte utilisée pour filtrer les éléments
The property on each item that is used to determine if it is selectable or not
Utilisé uniquement lorsque les données sont fournies par un serveur. Doit être réglé au total des éléments disponibles sur le serveur afin que la pagination fonctionne correctement
Changes expansion mode to single expand
Changes selection mode to single select
Modifications de la propriété de l'élément (ou des propriétés) doivent être utilisées pour l'ordre de tri. Peut être utilisé avec le modificateur .sync
Modification de direction du tri. Peut être utilisé avec le modificateur .sync
Used for controlling selected rows
L'emplacement par défaut. Utilisez ceci pour rendre vos éléments
{
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
}Defines content for when loading is true and no items are provided
Defines content for when no items are provided
Defines content for when search is provided but no results are found
Les éléments de la page actuelle
any[]Array of selected items
any[]Event emitted when an item is expanded or closed
{ item: any, value: boolean }Event emitted when an item is selected or deselected
{ item: any, value: boolean }Le nombre total de pages
numberInformations sur la pagination actuelle
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}{ items: any[], value: boolean }The .sync event for expanded prop
any[]L'événement .sync pour la prop group-by
string | string[]L'événement .sync pour la prop group-desc
boolean | boolean[]L'événement .sync pour la prop items-per-page
numberL'événement .sync pour la prop multi-sort
booleanL'événement .sync pour la prop must-sort
booleanInformations sur les options actuelles
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}L'événement .sync pour la proppage
numberL'événement .sync pour la prop sort-by
string | string[]L'événement .sync pour la prop sort-desc
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;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
The v-data-iterator has both a header and footer slot for adding extra content.
The v-data-iterator has internal state for both selection and expansion, just like v-data-table. In this example we use the methods isExpanded and expand available on the default slot.
Order, filters and pagination can be controlled externally by using the individual props
Prêt pour plus ? Continuez la lecture avec :