Pagination

Examples

Size variants

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

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

Page size

Use the page-size prop to specify the number of items per page.

Use the page-sizes prop to specify the candidate options for the number of items per page.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-pagination
    class="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;
}

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

Optional parts

Use the show-total / show-page-size / show-goto props to control whether to display the item total / item count selector / jump to the specified page.

Show total Show page size Show goto

Edit this demo on GitHubEdit

<template>
<article>
  <section class="toggles">
    <veui-checkbox
      v-model="showTotal"
      class="checkbox"
    >
      Show total
    </veui-checkbox>
    <veui-checkbox
      v-model="showPageSize"
      class="checkbox"
    >
      Show page size
    </veui-checkbox>
    <veui-checkbox
      v-model="showGoto"
      class="checkbox"
    >
      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;
}

.checkbox + .checkbox {
  margin-left: 16px;
}
</style>

API

Props

Name Type Default Description

ui

string

The preset style.

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

page number 1 The current page number (starting from 1).

total number - The total number of items.

to

string | Object

''

The target link template. The type is the same as the to prop of the Link component. When the type is a string path, the :page keyword will be replaced with the actual page number. When the type is an object, it will be converted to a string and the :page part will be replaced.

native boolean false Whether to use native link redirection.

page-size

number

pagination.pageSize

.sync

The number of items per page.

page-sizes Array<number> pagination.pageSizes The candidate options for the number of items per page.

show-goto boolean false Whether to display the direct jump to page.

show-total boolean false Whether to display the item total.

show-page-size boolean false Whether to display the item count selector.

Events

Name	Description
`pagesizechange`	Triggered when the number of items displayed per page is changed. The callback parameter is `(size: number)`. `size` is the new number of items displayed per page.
`redirect`	Triggered when a link is clicked. The callback parameter is `(page: number, event: Object)`. `page` is the target page number. `event` is the native event object. When `native` is `true`, calling `event.preventDefault` can prevent the redirection.

Configs

Key	Type	Default	Description
`pagination.pageSize`	`number`	`30`	The number of items per page.
`pagination.pageSizes`	`Array<number>`	`[30, 50, 100]`	The candidate options for the number of items per page.

Edit this page on GitHubEdit