Data iterator

El componente v-data-iterator se utiliza para mostrar datos, y comparte la mayor parte de su funcionalidad con el componente v-data-table. Algunas características incluyen ordenamiento, búsqueda, paginación y selección.

Uso

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

v-data-iterator
Nombre
content-class
Default
undefined
Type
string

Aplica una clase personalizada al elemento que envuelve a loss elementos de la lista

Nombre
content-props
Default
undefined
Type
object

Aplica props personalizadas al elemento que envuelve a los elementos de la lista

Nombre
content-tag
Default
'div'
Type
string

Especifica qué etiqueta debe ser utilizada por el elemento que envuelve a los elementos de la lista

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

Filtro de búsqueda personalizado.

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

Filtro de ordenamiento personalizado.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
disable-initial-sort
Default
false
Type
boolean

Deshabilita el ordenamiento por default en el render inicial.

Nombre
expand
Default
false
Type
boolean

Denota la tabla como filas que son expandibles.

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

La función que se utiliza para filtrar los elementos.

Nombre
hide-actions
Default
false
Type
boolean

Esconde las acciones de la tabla.

Nombre
item-key
Default
'id'
Type
string

El campo en el objeto dentro de cada elemento que denota una llave única.

Nombre
items
Default
[]
Type
array

El arreglo de filas de la tabla.

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
must-sort
Default
false
Type
boolean

Obliga a que al menos una columna siempre esté ordenada en lugar de variar entre los estados sorted ascending(ordenado ascendente)/sorted descending(ordenado descendente)/unsorted(sin orden).

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

The displayed icon for forcing pagination to the next page

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

El texto a mostrar cuando no hay datos.

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

El texto a mostrar cuando no hay resultados filtrados.

Nombre
pagination.sync
Default
Type
object

Utilizado para controlar la paginación y el ordenamiento desde fuera de la tabla. Puede también ser utilizado para configurar el ordenamiento por default de la columna.

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

The displayed icon for forcing pagination to the previous page

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

Los valores por default para el dropdown rows-per-page.

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

EL texto default para rows per page

Nombre
search
Default
undefined
Type
any

El modelo de búsqueda para filtrar los resultados.

Nombre
select-all
Default
undefined
Type
boolean | string

Agrega el checkbox seleccionar todos a la fila de encabezado. Puede ser ya sea un String que especifica qué color se debe aplicar al botón, o un Boolean (que utiliza el color default).

Nombre
total-items
Default
undefined
Type
number

Configura manualmente el número de filas, lo que deshabilita el ordenamiento y paginación pre-integrados. Se utiliza en conjunto con la prop de pagination para habilitar ordenamiento y paginación del lado del servidor.

Nombre
value
Default
[]
Type
array

Elementos de fila seleccionados.

Ejemplos

Slots

El v-data-iterator tiene tanto un slot header como un footer para agregar contenido extra

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
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