Paginación v3.9.2+
El componente de paginación se basa principalmente en el elemento 'el-pagination' para el empaquetado secundario, y expandió la función de desplazamiento automático.
Uso básico
<template>
<pagination
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList" />
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
data() {
return {
total: 0,
listQuery: {
page: 1,
limit: 20
}
}
},
methods: {
getList() {
// Obtener datos
}
}
}
</script>
Atributos
| Atributo | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| total | recuento total de artículos | Number | / |
| page | número de página actual, soporta el modificador .sync | Number | 1 |
| limit | Recuento de elementos de cada página, admite el modificador .sync | Number | 20 |
| page-sizes | Opciones de conteo de artículos por página | Number [] | 10, 20, 30, 50] |
| hidden | si ocultar | Boolean | false |
| auto-scroll | Si se desplaza automáticamente a la parte superior después de la paginación | Boolean | true |
También se admiten otros atributos del soporte de el-pagination del elemento. Consulte la Documentación para obtener más detalles..
Eventos
| Nombre del evento | Descripción | Parámetros |
|---|---|---|
| paginación | Se dispara cuando cambia el límite o la página | {paginación, límite} |