分页 Pagination

采用分页控制单页内的信息数量，也可进行页面跳转。

基本用法

分页的基本用法，total 属性为必填项。

---

代码事例

<template>
  <fk-pagination :total="50"/>
</template>

更多页码

当页码较大时，会使用更多页码的分页样式。

---

代码事例

<template>
  <fk-pagination :total="200"/>
</template>

每页条数

通过设置 show-page-size， 展示每页条数选择器。

---

代码事例

<template>
  <fk-pagination :total="200" show-page-size/>
</template>

页码跳转

通过设置 show-jumper，显示页码跳转输入框。

---

代码事例

<template>
  <fk-pagination :total="50" show-jumper/>
</template>

分页尺寸

分页分为 mini、small、medium、large 四种尺寸。

---

代码事例

<template>
  <fk-space direction="vertical" size="large">
    <fk-radio-group v-model="size" type="button">
      <fk-radio value="mini">Mini</fk-radio>
      <fk-radio value="small">Small</fk-radio>
      <fk-radio value="medium">Medium</fk-radio>
      <fk-radio value="large">Large</fk-radio>
    </fk-radio-group>
    <fk-pagination :total="50" :size="size" show-total show-jumper show-page-size />
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const size = ref('medium');

    return {
      size
    }
  },
}
</script>

简洁模式

通过设置 simple 属性开启简洁模式。

---

代码事例

<template>
  <fk-pagination :total="200" simple/>
</template>

展示总数

通过设置 show-total 属性显示数据总数。

---

代码事例

<template>
  <fk-pagination :total="200" show-total/>
</template>

全部展示

展示全部配置项。

---

代码事例

<template>
  <fk-pagination :total="50" show-total show-jumper show-page-size/>
</template>

自定义分页按钮

可以通过插槽自定义分页按钮内容

---

代码事例

<template>
  <fk-pagination :total="200">
    <template #page-item="{ page }">
      - {{page}} -
    </template>
    <template #page-item-step="{ type }">
      <icon-send :style="type==='previous' ? {transform:`rotate(180deg)`} : undefined" />
    </template>
    <template #page-item-ellipsis>
      <icon-sun-fill />
    </template>
  </fk-pagination>
</template>

API

<pagination> Props

参数名	描述	类型	默认值	版本
total (必填)	数据总数	number	-
current (v-model)	当前的页数	number	-
default-current	默认的页数（非受控状态）	number	1
page-size (v-model)	每页展示的数据条数	number	-
default-page-size	默认每页展示的数据条数（非受控状态）	number	10
disabled	是否禁用	boolean	false
hide-on-single-page	单页时是否隐藏分页	boolean	false
simple	是否为简单模式	boolean	false
show-total	是否显示数据总数	boolean	false
show-more	是否显示更多按钮	boolean	false
show-jumper	是否显示跳转	boolean	false
show-page-size	是否显示数据条数选择器	boolean	false
page-size-options	数据条数选择器的选项列表	number[]	[10, 20, 30, 40, 50]
page-size-props	数据条数选择器的Props	SelectProps	-
size	分页选择器的大小	'mini' | 'small' | 'medium' | 'large'	'medium'
page-item-style	分页按钮的样式	CSSProperties	-
active-page-item-style	当前分页按钮的样式	CSSProperties	-
base-size	计算显示省略的基础个数。显示省略的个数为 baseSize + 2 * bufferSize	number	6
buffer-size	显示省略号时，当前页码左右显示的页码个数	number	2
auto-adjust	是否在改变数据条数时调整页码	boolean	true	1.0.0

<pagination> Events

事件名	描述	参数
change	页码改变时触发	current: number
page-size-change	数据条数改变时触发	pageSize: number
page-change	页码和条数改变时触发	page: mixed

<pagination> Slots

插槽名	描述	参数	版本
total	总数	total: number	1.0.0
page-item-ellipsis	分页按钮（省略）	-	1.0.0
page-item-step	分页按钮（步）	type: 'previous'|'next'The type of page item step	1.0.0
page-item	分页按钮	page: numberThe page number of the paging button	1.0.0