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

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
normalNormal style with previous/next navigation around both sides.
heteroHetero style with previous/next navigation on the right.
fullFull style with total count and page size.
slimCondensed style.
pagenumber1Current page index (starts from 1).
totalnumber-Total page count.
tostring|Object''

The page path template. The type is the same as the to prop of Link component. When being string, the :page placeholder will be replaced with the actual page number. When being Object, the value will be resolved to string first and be go through the same placeholder replacement process.

nativebooleanfalseUse native links for navigation.
page-sizenumberpagination.pageSize

.sync

The count of item in each page.

page-sizesArraypagination.pageSizesThe predefined available page sizes for users to select.

Events

NameDescription
pagesizechangeTriggered when page-size is changed. The callback parameter list is (size: number), with size being the new page-size value.
redirectTriggered 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

KeyTypeDefaultDescription
pagination.pageSizenumber30The count of item in each page.
pagination.pageSizesArray<number>[30, 50, 100]The predefined available page sizes for users to select.