分页(Pagination)

用于另一个组件（如<b-table>或lists）的分页控件的“快速开始”、“上一个”、“下一个”、“最后一个”和“页面”按钮。

对于更改为新URL的分页，请改用 <b-pagination-nav>组件。

使用<b-table>的示例：

Current Page: 1

Id First Name Last Name
1 Fred Flintstone
2 Wilma Flintstone
3 Barney Rubble 
<template>
  <div class="overflow-auto">
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      aria-controls="my-table"
    ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [
          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
          { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
          { id: 3, first_name: 'Barney', last_name: 'Rubble' },
          { id: 4, first_name: 'Betty', last_name: 'Rubble' },
          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
          { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    }
  }
</script>

概述

<b-pagination>是提供当前页码输入控件的自定义输入组件。 该值应通过应用程序中的v-model绑定。页码从1开始索引。页数是根据为 总行和 每页提供的属性值计算的。

自定义外观

<b-pagination>支持多个属性/插槽，允许您自定义外观。 所有的*-text道具都是纯文本的，去掉了HTML，但是您可以使用它们相同名称的插槽对应项。

限制显示按钮的数量

要限制显示的页面按钮数（包括省略号，但不包括第一个、上一个、下一个和最后一个按钮），请使用limit属性指定所需的页面按钮数（包括省略号，如果显示）。 默认限制为5。支持的最小值为3。 当limit设置为3时，出于实际目的，不会显示省略号指示器。

通过设置hide-goto-end-buttons属性，可以选择隐藏第一个和 最后一个按钮。

通过设置隐藏省略号属性，可以选择性地禁用省略号的显示。

小屏幕支持

在较小的屏幕（即移动屏幕）上，一些<b-pagination>按钮将被隐藏，以最小化分页接口包装到多行的可能性：

  • 省略号指示器将隐藏在屏幕xs和更小的屏幕上。
  • 页码按钮将限制为在xs屏幕上最多可见3个或更小。

这样可以确保不超过3个页码按钮以及goto first、prev、next和last按钮可见。

按钮内容

有关所有可用插槽的完整列表，请参阅下面的Slots部分。 

<template>
  <div class="overflow-auto">
    <!-- Use text in props -->
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      first-text="First"
      prev-text="Prev"
      next-text="Next"
      last-text="Last"
    ></b-pagination>

    <!-- Use emojis in props -->
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      first-text="⏮"
      prev-text="⏪"
      next-text="⏩"
      last-text="⏭"
      class="mt-4"
    ></b-pagination>

    <!-- Use HTML and sub-components in slots -->
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      class="mt-4"
    >
      <template v-slot:first-text><span class="text-success">First</span></template>
      <template v-slot:prev-text><span class="text-danger">Prev</span></template>
      <template v-slot:next-text><span class="text-warning">Next</span></template>
      <template v-slot:last-text><span class="text-info">Last</span></template>
      <template v-slot:ellipsis-text>
        <b-spinner small type="grow"></b-spinner>
        <b-spinner small type="grow"></b-spinner>
        <b-spinner small type="grow"></b-spinner>
      </template>
      <template v-slot:page="{ page, active }">
        <b v-if="active">{{ page }}</b>
        <i v-else>{{ page }}</i>
      </template>
    </b-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        perPage: 10,
        currentPage: 1
      }
    }
  }
</script>

slo 页面始终具有作用域， 而slots first-text, prev-text, next-text和 last-text可以选择作用域。 省略号文本槽没有作用域。

页面槽可用的作用域变量属性：

属性 类型 描述
page Number 页码（从0到页数）
index Number 页码（从0索引到页码-1）
active Boolean 如果该页是活动页
disabled Boolean 如果页面按钮被禁用
content String 作为字符串的页码

first-text, prev-text, next-text和 last-text槽可用的作用域变量属性：

属性 类型 描述
page Number 页码（从1到页数）
index Number 页码（从0索引到页码-1）
disabled Boolean 如果页面按钮被禁用

转到第一个/最后一个按钮类型

如果希望有带有第一个和最后一个页码的按钮转到相应的页面，请使用第一个页码和 最后一个页码属性。

Goto first button number
Goto last button number
Goto first and last button number
<template>
  <div class="overflow-auto">
    <div>
      <h6>Goto first button number</h6>
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        first-number
      ></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Goto last button number</h6>
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        last-number
      ></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Goto first and last button number</h6>
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        first-number
        last-number
      ></b-pagination>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        rows: 100,
        perPage: 1,
        currentPage: 5
      }
    }
  }
</script>

按钮大小

通过将size属性设置为'sm'表示较小的按钮， 或将'lg'表示较大的按钮，可以选择从默认按钮大小更改为'sm'。

Small
Default
Large
<template>
  <div class="overflow-auto">
    <div>
      <h6>Small</h6>
      <b-pagination v-model="currentPage" :total-rows="rows" size="sm"></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Default</h6>
      <b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Large</h6>
      <b-pagination v-model="currentPage" :total-rows="rows" size="lg"></b-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 1
      }
    }
  }
</script>

Pill 样式

通过设置pills属性轻松切换到pill样式按钮

Small Pills
Default Pills
Large Pills
<template>
  <div class="overflow-auto">
    <div>
      <h6>Small Pills</h6>
      <b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Default Pills</h6>
      <b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
    </div>

    <div class="mt-3">
      <h6>Large Pills</h6>
      <b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 1
      }
    }
  }
</script>

注意: Pill样式需要BootstrapVue的自定义CSS/SCSS。

对齐

默认情况下，分页组件是左对齐的。将“对齐方式”更改为center, right（right是end的别名） 或通过将“支柱对齐”设置为适当的值来填充。

Left alignment (default)
Center alignment
Right (end) alignment
Fill alignment
<template>
  <div class="overflow-auto">
    <div>
      <h6>Left alignment (default)</h6>
      <b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Center alignment</h6>
      <b-pagination v-model="currentPage" :total-rows="rows" align="center"></b-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-right">Right (end) alignment</h6>
      <b-pagination v-model="currentPage" :total-rows="rows" align="right"></b-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Fill alignment</h6>
      <b-pagination v-model="currentPage" :total-rows="rows" align="fill"></b-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 3
      }
    }
  }
</script>

可访问性

<b-pagination>组件提供许多特性来支持辅助技术用户，例如aria属性和键盘导航。

aria 控制项

当分页控制页面上的另一个组件（如<b-table>）时， 将aria-controls属性设置为它所控制的元素的id。这将帮助无视力用户了解正在更新/控制的组件。

ARIA 标签

<b-pagination>提供了各种*-label-*属性， 用于设置组件中各个元素的aria-label，这将帮助辅助技术的用户。

属性 aria-label 内容默认值
label-first-page "Goto first page"
label-prev-page "Goto previous page"
label-next-page "Goto next page"
label-last-page "Goto last page"
label-page "Goto page", 附页码
aria-label "Pagination",应用于外部分页容器

label页面可以选择接受一个函数来生成aria标签。函数被传递一个参数，即页码（从1到页数的索引）。

您可以通过将prop设置为空字符串（''）来移除任何标签，但不建议这样做，除非按钮的内容以文本形式传达其用途。

键盘导航支持

<b-pagination>支持现成的键盘导航， 并遵循WAI-ARIA roving tabindex 模式。

  • 切换到分页组件将自动聚焦当前活动页按钮
  • LEFT (或 UP) and RIGHT (或 DOWN)箭头键将分别聚焦页面列表中的上一个和下一个按钮
  • ENTER或SPACE键将选择（单击）当前聚焦的页面按钮
  • 按TAB键将移动到页面上的下一个控件或链接，而按SHIFT+TAB键将移动到页面上的上一个控件或链接。

另请参阅

有关基于导航的分页，请参见 <b-pagination-nav>组件。

组件引用

<b-pagination>

View source

属性

属性 (Click to sort Ascending) 类型 默认值 描述
disabled Boolean false 当设置为“true”时，将禁用组件的功能并将其置于禁用状态
value v-model Number or String 当前页码，从1开始
limit Number or String 5 要显示的最大按钮数（如果显示，则包括省略号，但不包括bookend按钮）
align String 'left' 页面按钮的对齐方式：“开始”（或“左”）、“中心”、“结束”（或“右”）或“填充”
pills v2.1.0+ Boolean false 对分页按钮应用pill样式
hide-goto-end-buttons Boolean false 隐藏“转到第一页”和“转到最后一页”按钮
aria-label String 'Pagination' 要放入分页控件的“aria label”属性中的值
label-first-page String 'Go to first page' 要放入“转到第一页”按钮的“aria label”属性中的值
first-text String '«' “转到第一页”按钮中要放置的内容
first-number v2.3.0+ Boolean false 显示第一个页码而不是转到第一个按钮
first-class v2.3.0+ String or Array or Object 类应用于“转到第一页”按钮
label-prev-page String 'Go to previous page' 要放入“转到上一页”按钮的“aria label”属性中的值
prev-text String '‹' “转到上一页”按钮中要放置的内容
prev-class v2.3.0+ String or Array or Object 类应用于“转到上一页”按钮
label-next-page String 'Go to next page' 要放入“转到下一页”按钮的“aria label”属性中的值
next-text String '›' “转到下一页”按钮中要放置的内容
next-class v2.3.0+ String or Array or Object 类应用于“转到下一页”按钮
label-last-page String 'Go to last page' 要放入“转到最后一页”按钮的“aria label”属性中的值
last-text String '»' “转到最后一页”按钮中要放置的内容
last-number v2.3.0+ Boolean false 显示最后一个页码而不是转到最后一个按钮
last-class v2.3.0+ String or Array or Object 类应用于“转到最后一页”按钮
label-page String or Function 'Go to page' 要放入“转到页面”按钮的“aria label”属性中的值。页码将自动添加
page-class v2.3.0+ String or Array or Object 要应用于“转到页面”按钮的类
hide-ellipsis Boolean false 不显示省略号按钮
ellipsis-text String '…' 要放置在省略号占位符中的内容
ellipsis-class v2.3.0+ String or Array or Object 要应用于“省略号”占位符的类
size String 呈现按钮的大小：“sm”、“md”（默认）或“lg”
per-page Number or String 20 每页行数
total-rows Number or String 0 数据集中的总行数
aria-controls String 此控件所控制的元素或组件的ID。值放在“aria controls”属性中

v-model

属性 事件
value input

Slots

Slot 名称 描述 范围
first-text “转到首页”按钮的内容。 可选范围
prev-text “转到上一页”按钮的内容。 可选范围
next-text “转到下一页”按钮的内容。 可选范围
last-text “转到最后一页”按钮的内容。 可选范围
ellipsis-text “ ...”指示符内容。 没有范围
page 页码按钮的内容。 始终范围

事件

数据 参数 描述
input
  1. page - 所选页码（从1开始）
 当页面通过用户交互或编程方式更改时
change
  1. page - 所选页码（从1开始）
 当页面通过用户交互更改时

导入单个组件

可以通过以下命名导出将各个组件导入到项目中：

组成部分 命名导出 导入路径
<b-pagination> BPagination bootstrap-vue

例子:

import { BPagination } from 'bootstrap-vue'
Vue.component('b-pagination', BPagination)

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

Named Export Import Path
PaginationPlugin bootstrap-vue

例子:

import { PaginationPlugin } from 'bootstrap-vue'
Vue.use(PaginationPlugin)