@beisen-phoenix/pagination

@beisen-phoenix/pagination

Usage no npm install needed!

<script type="module">
  import beisenPhoenixPagination from 'https://cdn.skypack.dev/@beisen-phoenix/pagination';
</script>

README

分页

@beisen-phoenix/pagination

概述

当加载/渲染所有数据将花费很多时间时可用分页

API

参数 说明 类型 默认值 是否必传
total 总条数 number 0
current 当前页号 number 1
showCapacity 是否显示每页条数 boolean false
capacity 每页条数 number 15
capacityOptions 每页条数选项 Array [15, 30, 60, 100]
hideEndNumber 是否隐藏尾页 boolean false
showPageJump 是否显示跳至 boolean false
onCapacityChange 切换每页条数时回调 (capacity: number) => void
onChange 切换当前页数回调 (current: number) => void
extraCls 自定义最外层容器class,用于扩展样式 string ''
showTotalPage 是否显示总页数 boolean false
getPopupContainer 弹层挂载的容器 Function -
  current?: number
  total: number
  hideEndNumber?: boolean
  onChange?: (current: number, e: MouseEvent) => void
  showPageJump?: boolean
  capacityOptions?: Array<number>
  onCapacityChange?: (capacity: number, e: MouseEvent) => void
  showCapacity?: boolean
  capacity?: number
  extraCls?: string
  showTotalPage?: boolean

2019-08-21

total api 由总页数修改为总条数

多语言

参数 说明 类型 默认值
translation 语言包 用于翻译组件内置常量 {capacity: string,previousPage: string,nextPage: string,goTo: string,page: string, total: string,pages: string} {capacity: '条/页',previousPage: '上一页',nextPage: '下一页',goTo: '跳至',page: '页',total: '共',pages: '页'}