mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
94 lines
3.5 KiB
Markdown
94 lines
3.5 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Pagination 分页
|
||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||
|
||
## 概述
|
||
当加载/渲染所有数据将花费很多时间时；可切换页码浏览数据。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/pagination/1.html">
|
||
<template v-slot:demo>
|
||
<Pagination @on-change="changePage" :locking="pagination.locking" :current="pagination.current" :size="pagination.size" :total="pagination.total"></Pagination>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>基本用法。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="快捷跳转" template="ui/templates/pagination/2.html">
|
||
<template v-slot:demo>
|
||
<Pagination @on-change="changePage" show-quick-jumper :locking="pagination.locking" :current="pagination.current" :size="pagination.size" :total="pagination.total"></Pagination>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>快捷跳转到想去的页码。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="自定义每页条数的可选范围" template="ui/templates/pagination/3.html">
|
||
<template v-slot:demo>
|
||
<Pagination :size-list="sizeList" :current="pagination.current" :size="pagination.size" :total="pagination.total"></Pagination>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>配置sizeList属性即可，默认为[8, 16, 32, 50, 100]</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</Row>
|
||
</ClientOnly>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
pagination: {
|
||
locking: false,
|
||
size: 10,
|
||
current: 1,
|
||
total: 100
|
||
},
|
||
sizeList: [10, 20, 30]
|
||
}
|
||
},
|
||
methods: {
|
||
changePage({ current, size}){
|
||
console.log(arguments)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.ui-select-dropdown-list {
|
||
padding-left: 0;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
## API
|
||
|
||
### Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| current | 当前第几页 | Number | 1 |
|
||
| size | 每一页的条数 | Number | 8 |
|
||
| total | 总页数 | Number | 0 |
|
||
| sizeList | 每页条数的可选列表 | Array | [8, 16, 32, 50, 100] |
|
||
| locking | 是否锁定, 当锁定时，上一页下一个等操作被禁止 | Boolean | false |
|
||
| showQuickJumper | 是否开启快捷跳转 | Boolean | false |
|
||
| showSizeChanger | 是否显示分页个数的选择框 | Boolean | true |
|
||
|
||
|
||
### Events
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:----------------|:--------------------------|:-----------------------------------------------------|
|
||
| on-change | 上一页、下一页、回到首页、回到最后一页、跳转时触发 | ({ current, size }) |
|
||
|
||
|