首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Page 分页

概述

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

代码示例

代码语言:javascript
复制
<template>
    <Page :total="100" />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :total="100" show-sizer />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :total="100" show-elevator />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :total="100" show-total />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :total="40" size="small" />
    <Page :total="40" size="small" show-elevator show-sizer />
    <Page :total="40" size="small" show-total />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :current="2" :total="50" simple />
</template>
<script>
    export default {
        
    }
</script>
代码语言:javascript
复制
<template>
    <Page :total="100" prev-text="Previous" next-text="Next" />
</template>
<script>
    export default {
        
    }
</script>

API

Page props

属性

说明

类型

默认值

current

当前页码,支持 .sync 修饰符

Number

1

total

数据总数

Number

0

page-size

每页条数

Number

10

page-size-opts

每页条数切换的配置

Array

[10, 20, 30, 40]

placement

条数切换弹窗的展开方向,可选值为 bottom 和 top

String

bottom

size

可选值为small(迷你版)或不填(默认)

String

-

simple

简洁版

Boolean

false

show-total

显示总数

Boolean

false

show-elevator

显示电梯,可以快速切换到某一页

Boolean

false

show-sizer

显示分页,用来改变page-size

Boolean

false

class-name

自定义 class 名称

String

-

styles

自定义 style 样式

Object

-

transfer

是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果

Boolean

false

prev-text

替代图标显示的上一页文字

String

-

next-text

替代图标显示的下一页文字

String

-

Page events

事件名

说明

返回值

on-change

页码改变的回调,返回改变后的页码

页码

on-page-size-change

切换每页条数时的回调,返回切换后的每页条数

page-size

Page slot

名称

说明

自定义显示总数的内容

扫码关注腾讯云开发者

领取腾讯云代金券