# Pagination v3.9.2+
Pagination component is mainly based on Element 'el-pagination' for the secondary packaging, and expanded the function of auto-scroll.
# Basic Usage
<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() { // Fetch data } } } </script> # Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
| total | total item count | Number | / |
| page | current page number, supports the .sync modifier | Number | 1 |
| limit | item count of each page, supports the .sync modifier | Number | 20 |
| page-sizes | options of item count per page | Number [] | 10, 20, 30, 50] |
| hidden | whether to hide | Boolean | false |
| auto-scroll | whether to automatically scroll to the top after pagination | Boolean | true |
Other attributes of the element's el-pagination support are also supported. See Documentation for details.
# Events
| Event Name | Description | Parameters |
|---|---|---|
| pagination | Triggered when the limit or page changes | {page,limit} |