VEUI

VEUI on GitHub
Play!EnglishEN

Pagination 分页

示例

尺寸

在 GitHub 上编辑此示例编辑
<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 属性来指定当前每页的个数。

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

在 GitHub 上编辑此示例编辑
<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>

可选部分

使用 show-total / show-page-size / show-goto 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。

在 GitHub 上编辑此示例编辑
<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

属性

名称类型默认值描述
uistring-

预设样式。

描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
pagenumber1当前页码(从 1 开始)。
totalnumber-项目总数。
tostring | Object''

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

nativebooleanfalse原生链接跳转。
page-sizenumberpagination.pageSize

.sync

每页个数。

page-sizesArray<number>pagination.pageSizes每页个数候选项。
show-gotobooleanfalse是否显示直接跳转到页码。
show-totalbooleanfalse是否显示项目总数。
show-page-sizebooleanfalse是否显示每页项目数选择器。

事件

名称描述
pagesizechange每页显示项目被切换时触发,回调参数为 (size: number)size 为新的每页显示项目数。
redirect链接跳转时触发,回调参数为 (page: number, event: Object)page 为要跳转的目标页码。event 为原生的事件对象,在 nativetrue 时,调用 event.preventDefault 可阻止跳转。

全局配置

配置项类型默认值描述
pagination.pageSizenumber30每页个数。
pagination.pageSizesArray<number>[30, 50, 100]每页个数候选项。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024