add pagination demo
wangxueliang
parent
e488cecdf3
commit
9f8d77d3c8
|
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 基本
|
||||||
|
基础分页。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
Basic pagination.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination v-model="current" :total="50" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 2,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 改变
|
||||||
|
改变每页显示条目数。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Changer
|
||||||
|
Change `pageSize`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination showSizeChanger @showSizeChange="onShowSizeChange" :defaultCurrent="3" :total="500" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onShowSizeChange(current, pageSize) {
|
||||||
|
console.log(current, pageSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.ant-select {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<cn>
|
||||||
|
#### 受控
|
||||||
|
受控制的页码。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Controlled
|
||||||
|
Controlled page number.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination @change="onChange" :current="current" :total="50" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(current) {
|
||||||
|
this.current = current
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 自定义下拉选项
|
||||||
|
自定义下拉选项，例如添加全部选项
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Custom dropdown options
|
||||||
|
Customize dropdown options such as adding all options
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination
|
||||||
|
:pageSizeOptions="pageSizeOptions"
|
||||||
|
:total="total"
|
||||||
|
showSizeChanger
|
||||||
|
:pageSize="pageSize"
|
||||||
|
v-model="current"
|
||||||
|
@showSizeChange="onShowSizeChange"
|
||||||
|
>
|
||||||
|
<template slot='buildOptionText' slot-scope='props'>
|
||||||
|
<span v-if="props.value!=='50'">{{props.value}}条/页</span>
|
||||||
|
<span v-if="props.value==='50'">全部</span>
|
||||||
|
</template>
|
||||||
|
</a-pagination>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageSizeOptions: ['10', '20', '30', '40', '50'],
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 50,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onShowSizeChange(current, pageSize) {
|
||||||
|
this.pageSize = pageSize
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.ant-select {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -1,88 +1,71 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
基本
|
|
||||||
<Pagination :current="1" :total="50" />
|
|
||||||
<br>
|
|
||||||
更多
|
|
||||||
<Pagination :current="6" :total="500" />
|
|
||||||
<br>
|
|
||||||
简洁
|
|
||||||
<div style="margin-bottom:10px">
|
|
||||||
<pagination :simple="simple" :current="5" :total="total"></pagination>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
改值操作
|
|
||||||
<div style="margin-bottom:10px">
|
|
||||||
<pagination :current="current" :total="total" @change="onchange"></pagination>
|
|
||||||
<vc-button @click="changeValue">改值</vc-button>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
双向绑定
|
|
||||||
<div>
|
|
||||||
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
|
|
||||||
<vc-button @click="getValue">当前值</vc-button>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
迷你
|
|
||||||
<Pagination :current="1" :total="50" size="small"/>
|
|
||||||
<Pagination :current="1" :total="50" :showTotal="showTotal" size="small" showSizeChanger showQuickJumper/>
|
|
||||||
<br>
|
|
||||||
总数
|
|
||||||
<Pagination :current="1" :total="50" :showTotal="showTotal"/>
|
|
||||||
<Pagination :current="1" :total="50" :showTotal="showTotal1"/>
|
|
||||||
<br>
|
|
||||||
跳转
|
|
||||||
<Pagination v-model="current" :total="50" :showQuickJumper="showQuickJumper" showSizeChanger>
|
|
||||||
<template slot='buildOptionText' slot-scope='props'>
|
|
||||||
<span>{{props.value}}条/页</span>
|
|
||||||
</template>
|
|
||||||
</Pagination>
|
|
||||||
<vc-button @click="getValue">当前值</vc-button>
|
|
||||||
<br>
|
|
||||||
上一步下一步
|
|
||||||
<Pagination :total="500" :itemRender="itemRender" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
<script>
|
||||||
import '../style'
|
import Basic from './basic'
|
||||||
import { Pagination, Button } from 'antd/index'
|
import Changer from './changer'
|
||||||
|
import Controlled from './controlled'
|
||||||
|
import CustomChanger from './custom-changer'
|
||||||
|
import ItemRender from './itemRender'
|
||||||
|
import Jump from './jump'
|
||||||
|
import Mini from './mini'
|
||||||
|
import More from './more'
|
||||||
|
import Simple from './simple'
|
||||||
|
import Total from './total'
|
||||||
|
import CN from '../index.zh-CN.md'
|
||||||
|
import US from '../index.en-US.md'
|
||||||
|
|
||||||
|
const md = {
|
||||||
|
cn: `# Pagination
|
||||||
|
|
||||||
|
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
- 当加载/渲染所有数据将花费很多时间时；
|
||||||
|
- 可切换页码浏览数据。
|
||||||
|
|
||||||
|
## 代码演示`,
|
||||||
|
|
||||||
|
us: `# Pagination
|
||||||
|
|
||||||
|
A long list can be divided into several pages by 'Pagination', and only one page will be loaded at a time.
|
||||||
|
|
||||||
|
## When To Use
|
||||||
|
|
||||||
|
- When it will take a long time to load/render all items.
|
||||||
|
- If you want to browse the data by navigating through pages.`,
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
data () {
|
render () {
|
||||||
return {
|
return (
|
||||||
simple: true,
|
<div>
|
||||||
current: 1,
|
<md cn={md.cn} us={md.us}/>
|
||||||
total: 483,
|
<Basic />
|
||||||
showQuickJumper: true,
|
<br/>
|
||||||
}
|
<More />
|
||||||
},
|
<br/>
|
||||||
methods: {
|
<Changer />
|
||||||
changeValue () {
|
<br/>
|
||||||
this.current = 4
|
<CustomChanger />
|
||||||
},
|
<br/>
|
||||||
getValue () {
|
<Jump />
|
||||||
console.log(this.current)
|
<br/>
|
||||||
},
|
<Mini />
|
||||||
showTotal (total) {
|
<br/>
|
||||||
return `Total ${total} items`
|
<Simple />
|
||||||
},
|
<br/>
|
||||||
showTotal1 (total, range) {
|
<Controlled />
|
||||||
return `${range[0]}-${range[1]} of ${total} items`
|
<br/>
|
||||||
},
|
<Total />
|
||||||
onchange (page) {
|
<br/>
|
||||||
console.log(page)
|
<ItemRender />
|
||||||
},
|
<br/>
|
||||||
itemRender (current, type, originalElement) {
|
<api>
|
||||||
if (type === 'prev') {
|
<template slot='cn'>
|
||||||
return <a>Previous</a>
|
<CN/>
|
||||||
} else if (type === 'next') {
|
</template>
|
||||||
return <a>Next</a>
|
<US/>
|
||||||
}
|
</api>
|
||||||
return originalElement
|
</div>
|
||||||
},
|
)
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Pagination,
|
|
||||||
vcButton: Button,
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<cn>
|
||||||
|
#### 上一步和下一步
|
||||||
|
修改上一步和下一步为文字链接。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Prev and next
|
||||||
|
Use text link for prev and next button.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination :total="500" :itemRender="itemRender" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
itemRender(current, type, originalElement) {
|
||||||
|
if (type === 'prev') {
|
||||||
|
return <a>Previous</a>;
|
||||||
|
} else if (type === 'next') {
|
||||||
|
return <a>Next</a>;
|
||||||
|
}
|
||||||
|
return originalElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<cn>
|
||||||
|
#### 跳转
|
||||||
|
快速跳转到某一页。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Jumper
|
||||||
|
Jump to a page directly.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onChange(pageNumber) {
|
||||||
|
console.log('Page: ', pageNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 迷你
|
||||||
|
迷你版本。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Mini size
|
||||||
|
Mini size pagination.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-pagination size="small" :total="50" />
|
||||||
|
<a-pagination size="small" :total="50" showSizeChanger showQuickJumper />
|
||||||
|
<a-pagination size="small" :total="50" :showTotal="total => `Total ${total} items`" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.ant-select {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.code-box-demo .ant-pagination:not(:last-child) {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 更多
|
||||||
|
更多分页。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### more
|
||||||
|
Mode pages.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination :defaultCurrent="6" :total="500" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 简洁
|
||||||
|
简单的翻页。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Simple mode
|
||||||
|
Simple mode.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-pagination simple :defaultCurrent="2" :total="50" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
|
||||||
|
<cn>
|
||||||
|
#### 总数
|
||||||
|
通过设置 `showTotal` 展示总共有多少数据。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Total number
|
||||||
|
You can show the total number of data by setting `showTotal`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-pagination
|
||||||
|
:total="85"
|
||||||
|
:showTotal="total => `Total ${total} items`"
|
||||||
|
:pageSize="20"
|
||||||
|
:defaultCurrent="1"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<a-pagination
|
||||||
|
:total="85"
|
||||||
|
:showTotal="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
|
||||||
|
:pageSize="20"
|
||||||
|
:defaultCurrent="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
## API
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Pagination @change={onChange} :total="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| current | current page number | number | - |
|
||||||
|
| defaultCurrent | default initial page number | number | 1 |
|
||||||
|
| defaultPageSize | default number of data items per page | number | 10 |
|
||||||
|
| hideOnSinglePage | Whether to hide pager on single page | boolean | false |
|
||||||
|
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
|
||||||
|
| pageSize | number of data items per page | number | - |
|
||||||
|
| pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
|
||||||
|
| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
|
||||||
|
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
|
||||||
|
| showTotal | to display the total number and range | Function(total, range) | - |
|
||||||
|
| simple | whether to use simple mode | boolean | - |
|
||||||
|
| size | specify the size of `Pagination`, can be set to `small` | string | "" |
|
||||||
|
| total | total number of data items | number | 0 |
|
||||||
|
|
||||||
|
### events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
|
||||||
|
| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
## API
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Pagination @change={onChange} :total="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| current(v-model) | 当前页数 | number | - |
|
||||||
|
| defaultCurrent | 默认的当前页数 | number | 1 |
|
||||||
|
| defaultPageSize | 默认的每页条数 | number | 10 |
|
||||||
|
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
|
||||||
|
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
|
||||||
|
| pageSize | 每页条数 | number | - |
|
||||||
|
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
|
||||||
|
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
|
||||||
|
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
|
||||||
|
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
|
||||||
|
| simple | 当添加该属性时，显示为简单分页 | boolean | - |
|
||||||
|
| size | 当为「small」时，是小尺寸分页 | string | "" |
|
||||||
|
| total | 数据总数 | number | 0 |
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
|
||||||
|
| showSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
|
||||||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||||
const hashs = window.location.hash.split('/')
|
const hashs = window.location.hash.split('/')
|
||||||
const d = hashs[hashs.length - 1]
|
const d = hashs[hashs.length - 1]
|
||||||
return {
|
return {
|
||||||
component: import(`../components/steps/demo/${d}`),
|
component: import(`../components/pagination/demo/${d}`),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default [
|
export default [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue