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