Pagination 翻页

示例

尺寸

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

跳转到指定页

使用 goto 属性开启跳转到指定页的功能。

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

每页个数

使用 page-size 属性来指定当前每页的个数。

使用 page-sizes 属性来指定每页个数候选项。

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

API

属性

名称类型默认值描述

ui

string=

预设样式。

值	描述
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。

page number 1 当前页码（从 1 开始）。

total number - 总页数。

to

string | Object

''

目标链接模板。类型见 Link 组件的 to 属性。其中，类型为 string 路径时其中的 :page 关键词会被替换为实际页码。类型为 Object 时，会将起转换为 string 后替换掉 :page 部分。

native boolean false 原生链接跳转。

page-size

number

pagination.pageSize

.sync

每页个数。

page-sizes Array pagination.pageSizes 每页个数候选项。

goto boolean false 是否显示直接跳转到页码。

事件

名称	描述
`pagesizechange`	`page-size` 改变时触发，回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。
`redirect`	链接跳转时触发，回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象，在 `native` 为 `true` 时，调用 `event.preventDefault` 可阻止跳转。

全局配置

配置项	类型	默认值	描述
`pagination.pageSize`	`number`	`30`	每页个数。
`pagination.pageSizes`	`Array<number>`	`[30, 50, 100]`	每页个数候选项。

在 GitHub 上编辑此页