Tui

Pagination 分页

分页组件，支持常规页码切换、左右翻页按钮、省略号跳转和样式定制。

基础用法

通过 total + pageSize 自动计算总页数，支持 v-model:currentPage 与 v-model:pageSize。

1

2

3

4

5

6

···

18

10条/页

跳转到

共 178 条

示例代码

vue

左右翻页按钮

可通过 leftBtnShow/rightBtnShow 开启左右按钮，并自定义按钮文案。

上一页

1

···

4

5

6

7

8

···

26

下一页

10条/页

跳转到

共 260 条

示例代码

vue

省略号快速跳转

当页码较多时会出现省略号，点击可按 jumpStep 步进跳转。

1

···

10

11

12

13

14

···

68

10条/页

跳转到

共 680 条

示例代码

vue

样式定制

支持通过 bg、align 与 pageSizes 定制展示效果。

1

2

3

4

5

6

···

24

10条/页

跳转到

共 240 条

示例代码

vue

属性 Props

currentPage

当前页码（支持 v-model:currentPage）

number

1

pageSize

每页条数（支持 v-model:pageSize）

number

10

total

总条数

number

0

jumpStep

点击省略号时按可视页码窗口跳转的步进数量

number

5

pagerCounts

数字页码按钮数量（不含省略号，含首尾页码）

number

7

pageSizes

pageSize 下拉选项

number[]

[10, 20, 30, 40, 50]

jumpShow

是否显示快捷跳转

boolean

true / false

true

leftBtnShow

是否显示左侧翻页按钮

boolean

true / false

false

rightBtnShow

是否显示右侧翻页按钮

boolean

true / false

false

leftBtnText

左侧翻页按钮文本

string

<

rightBtnText

右侧翻页按钮文本

string

>

bg

当前页高亮背景色

string

#1c8cdc

事件 Events

change

页码变化时触发

(page: number) => void

update:currentPage

currentPage 更新事件

(page: number) => void

update:pageSize

pageSize 更新事件

(size: number) => void

基础用法

左右翻页按钮

省略号快速跳转

样式定制

属性 Props

事件 Events