Pagination

Demos

Size variants

<template>
<article>
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
  />
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    ui="s"
  />
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    ui="xs"
  />
</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>

<style lang="less" scoped>
article {
  text-align: right;
}

.veui-pagination {
  margin: 1.2em 0;
}
</style>

Go to a specific page

Use the goto prop to enable the go to page section.

<template>
<article>
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    goto
  />
</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>

<style lang="less" scoped>
article {
  text-align: right;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`xs`	Extra small.
`s`	Small.
`m`	Medium.

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

native boolean false Use native links for navigation.

page-size

number

pagination.pageSize

.sync

The count of item in each page.

page-sizes Array pagination.pageSizes The predefined available page sizes for users to select.

goto boolean false Whether to show “goto page number” section.

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`.

Configs

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.

Edit this page on GitHub