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 |
---|---|---|---|
small | si desea utilizar una paginación pequeña | boolean | false |
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] |
popper-class | nombre de clase personalizado para el tamaño de página del select desplegable | string | '' |
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 |
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
ypage-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 decurrent-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 enlayout
), tienes que escuchar también el cambiopage-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
.
Slots
Nombre | Descripción |
---|---|
default | contenido personalizado. Para utilizar esto necesitas declarar slot en el layout |