Page 分页

概述

当数据量较多时,使用分页可以快速进行数据切换。

代码示例

Page 分页 - 图1

基本

基本的分页,页数过多时会自动折叠。

  1. <template>
  2. <Page :total="100" />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Page 分页 - 图2

每页数量

可以切换每页显示的数量。

  1. <template>
  2. <Page :total="100" show-sizer />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Page 分页 - 图3

电梯

快速跳转到某一页。

  1. <template>
  2. <Page :total="100" show-elevator />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Page 分页 - 图4

总数

显示总共多少条数据,接受 slot 来自定义内容,默认显示共{{ total }}条

  1. <template>
  2. <Page :total="100" show-total />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Page 分页 - 图5

迷你型

设置sizesmall使用迷你型,迷你型拥有普通的所有功能。

  1. <template>
  2. <Page :total="40" size="small" />
  3. <Page :total="40" size="small" show-elevator show-sizer />
  4. <Page :total="40" size="small" show-total />
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Page 分页 - 图6

简洁

设置simple属性即可使用简洁版的分页,通过输入页码回车切换,或使用鼠标点击切换页码,或使用键盘的上下键来切换。简洁分页不能使用总数、电梯和切换数量。

  1. <template>
  2. <Page :current="2" :total="50" simple />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Page 分页 - 图7

上一页和下一页

使用属性 prev-textnext-text,替代图标显示为文字。

  1. <template>
  2. <Page :total="100" prev-text="Previous" next-text="Next" />
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

API

Page props

属性说明类型默认值
current当前页码,支持 .sync 修饰符Number1
total数据总数Number0
page-size每页条数Number10
page-size-opts每页条数切换的配置Array[10, 20, 30, 40]
placement条数切换弹窗的展开方向,可选值为 bottomtopStringbottom
size可选值为small(迷你版)或不填(默认)String-
simple简洁版Booleanfalse
show-total显示总数Booleanfalse
show-elevator显示电梯,可以快速切换到某一页Booleanfalse
show-sizer显示分页,用来改变page-sizeBooleanfalse
class-name自定义 class 名称String-
styles自定义 style 样式Object-
transfer是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果Booleanfalse
prev-text替代图标显示的上一页文字String-
next-text替代图标显示的下一页文字String-
disabled 4.0.0是否禁用Booleanfalse

Page events

事件名说明返回值
on-change页码改变的回调,返回改变后的页码页码
on-page-size-change切换每页条数时的回调,返回切换后的每页条数page-size

Page slot

名称说明
自定义显示总数的内容