Pagination
Demos
Style variants
<template>
<article>
<veui-pagination
:page="page"
:total="total"
:to="to"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="hetero"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="full"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="slim"
/>
</article>
</template>
<script>
import { Pagination } from 'veui'
export default {
components: {
'veui-pagination': Pagination
},
data () {
return {
to: './pagination?page=:page',
total: 10101
}
},
computed: {
page () {
return Number(this.$route.query.page) || 1
}
}
}
</script>
API
Props
Name | Type | Default | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ui | string | - | Style variants.
| ||||||||||
page | number | 1 | Current page index (starts from 1 ). | ||||||||||
total | number | - | Total page count. | ||||||||||
to | string|Object | '' | The page path template. The type is the same as the | ||||||||||
native | boolean | false | Use native links for navigation. | ||||||||||
page-size | number | pagination.pageSize |
The count of item in each page. | ||||||||||
page-sizes | Array | pagination.pageSizes | The predefined available page sizes for users to select. |
Events
Name | Description |
---|---|
pagesizechange | Triggered when page-size is changed. The callback parameter list is (size: number) , with size being the new page-size value. |
redirect | Triggered when page links are activated. The callback parameter list is (page: number, event: Object) . page is the number of the targe page. event is the native event object, calling event.preventDefault will stop navigation when native is true . |
Global config
Key | Type | Default | Description |
---|---|---|---|
pagination.pageSize | number | 30 | The count of item in each page. |
pagination.pageSizes | Array<number> | [30, 50, 100] | The predefined available page sizes for users to select. |