Pagination

Demos

Size variants

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

Page size

Use the page-size prop to specify the current page size.

Use the page-sizes prop to specify the page size options.

Edit this page on GitHubEdit

<template>
<article>
  <veui-pagination
    :page="page"
    :page-size="pageSize"
    :page-sizes="pageSizes"
    :total="total"
    :to="to"
    @pagesizechange="handlePageSizeChange"
  />
</article>
</template>

<script>
import { Pagination } from 'veui'

export default {
  components: {
    'veui-pagination': Pagination
  },
  data () {
    return {
      to: './pagination?page=:page',
      total: 10101,
      pageSize: 20,
      pageSizes: [20, 30, 50, 100]
    }
  },
  computed: {
    page () {
      return Number(this.$route.query.page) || 1
    }
  },
  methods: {
    handlePageSizeChange (size) {
      this.pageSize = size
      if (this.page !== 1) {
        this.$router.push({
          path: './pagination?page=1'
        })
      }
    }
  }
}
</script>

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

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

Optional parts

Use the show-total / show-page-size / show-goto props to control the visibility of the total items / page size selector / goto page parts.

Show total Show page size Show goto

Edit this page on GitHubEdit

<template>
<article>
  <section class="toggles">
    <veui-checkbox v-model="showTotal">
      Show total
    </veui-checkbox>
    <veui-checkbox v-model="showPageSize">
      Show page size
    </veui-checkbox>
    <veui-checkbox v-model="showGoto">
      Show goto
    </veui-checkbox>
  </section>
  <section>
    <veui-pagination
      :page="page"
      :total="total"
      to="./pagination?page=:page"
      :show-total="showTotal"
      :show-goto="showGoto"
      :show-page-size="showPageSize"
    />
  </section>
</article>
</template>

<script>
import { Pagination, Checkbox } from 'veui'

export default {
  components: {
    'veui-pagination': Pagination,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      to: '.',
      total: 10101,
      showTotal: true,
      showGoto: true,
      showPageSize: true
    }
  },
  computed: {
    page () {
      return Number(this.$route.query.page) || 1
    }
  }
}
</script>

<style lang="less" scoped>
.toggles {
  margin-bottom: 20px;
}

.veui-checkbox + .veui-checkbox {
  margin-left: 16px;
}
</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 items 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.

show-goto boolean= false Whether to show the go to page section.

show-total boolean= false Whether to show the total page count.

show-page-size boolean= false Whether to show the page size selection 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 GitHubEdit