Fighting DesignPagination 分页器
用它处理过多的数据吧
基本使用
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