Paginación

Si tiene que mostrar muchos datos en una página, utilice la paginación.

Uso básico

Número de páginas

Botones con color de fondo

Paginación pequeña

Use paginación pequeña en caso de espacio limitado.

Oculte la paginación cuando solo hay una página

Cuando solo hay una página, oculte la paginación configurando el atributo hide-on-single-page.

Más elementos

Añade más módulos basados en tu escenario.

API

Attributes

Nombre	Descripción	Tipo	Por defecto
size 2.7.6	pagination size	`enum`	'default'
background	si los botones tienen un color de fondo	`boolean`	false
page-size / v-model:page-size	contador de elementos de cada página	`number`	—
default-page-size	default initial value of page size, not setting is the same as setting 10	`number`	—
total	total de elementos	`number`	—
page-count	total de páginas. Asigne `total` o `page-count` y las páginas serán mostradas; si necesita `page-sizes`, `total` es requerido	`number`	—
pager-count	número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor	`number`	7
current-page / v-model:current-page	número de página actual	`number`	—
default-current-page	default initial value of current-page, not setting is the same as setting 1	`number`	—
layout	disposición de la paginación, elementos separados con una coma	`string`	prev, pager, next, jumper, ->, total
page-sizes	opciones de conteo de elementos por página	`object`	[10, 20, 30, 40, 50, 100]
append-size-to 2.8.4	which element the size dropdown appends to	`string`	—
popper-class	nombre de clase personalizado para el tamaño de página del select desplegable	`string`	''
popper-style 2.11.5	custom style for the page size Select's dropdown	`string` / `object`	—
prev-text	texto para el botón anterior	`string`	''
prev-icon	icon for the prev button, has a lower priority than `prev-text`	`string` / `Component`	ArrowLeft
next-text	texto para el siguiente botón	`string`	''
next-icon	icon for the next button, has a lower priority than `next-text`	`string` / `Component`	ArrowRight
disabled	si la paginación está deshabilitada	`boolean`	false
teleported 2.3.13	whether Pagination select dropdown is teleported to the body	`boolean`	true
hide-on-single-page	whether to hide when there's only one page	`boolean`	false
small deprecated	si desea utilizar una paginación pequeña	`boolean`	false

WARNING

Detectaremos algunos usos obsoletos, si la paginación no apareció o funcionó como se esperaba, por favor revise las siguientes reglas:

Tiene que definir uno de total y page-count, de lo contrario no podemos determinar el número total de páginas. Si ambos están definidos, page-count se toma de forma prioritaria.
Si current-page está definida, tiene que escuchar los cambios de current-page, por definirlo también @update:current-page, de lo contrario la paginación no funcionara.
Si page-size está definido mientras se muestra el selector de tamaño de página (sizes incluido en layout), tienes que escuchar también el cambio page-size definido por @update:page-size, de lo contrario el cambio del tamaño de la página no funcionara.

Events

Nombre	Descripción	Tipo
size-change	se dispara cuando `page-size` cambia	`Function`
current-change	se dispara cuando `current-page` cambia	`Function`
change 2.4.4	triggers when `current-page` or `page-size` changes	`Function`
prev-click	se dispara cuando el botón prev recibe el clic y la página actual cambia	`Function`
next-click	se dispara cuando el botón next recibe el clic y la página actual cambia	`Function`

WARNING

Los eventos anteriores no son recomendados (pero siguen siendo soportados por una razón de compatibilidad), mejor opción es usar el enlace de datos bidireccionales por v-model.