VEUI

VEUI on GitHub
中文

Pagination

Demos

Size variants

Edit this demo on GitHubEdit
<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 demo 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.

Edit this demo 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

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
xsExtra small.
sSmall.
mMedium.
pagenumber1Current page index (starts from 1).
totalnumber-Total items 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.
show-gotoboolean=falseWhether to show the go to page section.
show-totalboolean=falseWhether to show the total page count.
show-page-sizeboolean=falseWhether to show the page size selection section.

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.

Configs

KeyTypeDefaultDescription
pagination.pageSizenumber30The count of item in each page.
pagination.pageSizesArray<number>[30, 50, 100]The predefined available page sizes for users to select.
Edit this page on GitHubEdit
© Baidu, Inc. 2023