Fighting Design

Appearance

On this page

Pagination 分页器 ​

用它处理过多的数据吧

DANGER

组件仍在测试阶段，高频更新中，部分参数暂不稳定！

基本使用 ​

v-model:current 属性来绑定当前页码

total 属性配置总页数

1
2
3
4
5
6
10
开启

页数选择器 ​

page-select 属性可添加一个每页大小的选择器、传入值是一个数字类型的数组

1
2
3
4
5
6
10
开启

带背景色或圆角 ​

background 属性控制分页是否带背景色

round 属性控制分页是否带圆角

1
2
3
4
5
6
10
1
2
3
4
5
6
10
开启

自定 Icon ​

1
2
3
4
5
6
10
开启

禁用状态 ​

disabled 属性表示是否禁用分页功能

1
2
3
4
5
6
10
开启

展示快速跳转搜索框 ​

jump-search 属性表示是否禁用分页功能

1
2
3
4
5
6
10
开启

Attributes ​

参数说明类型可选值默认值
v-model:current当前选中页码number——1
v-model:page-size每页多少条number——10
total总页数number——0
page-select开启页数选择器，可选每页多少条number[]————
background是否带有背景色boolean——false
round是否带有圆角boolean——false
prev-icon自定义的上一页图标FightingIcon————
next-icon自定义的下一页图标FightingIcon————
disabled是否禁用boolean——false
jump-search是否展示快速跳转搜索框boolean——false
on-change改变页码回调函数PaginationEvent————
on-prev点击上一页触发的回调PaginationEvent————
on-next点击下一页触发的回调PaginationEvent————
on-page-size-change每页条数发生变化时触发的回调PaginationEvent————

Interface ​

组件导出以下类型定义：

ts
import type {
  PaginationInstance,
  PaginationProps,
  PaginationEvent
} from 'fighting-design'

PaginationEvent ​

ts
type PaginationEvent = (current: number, pageSize: number, evt: MouseEvent) => void

Contributors ​