wangxueliang
7 years ago
parent
fbf7eaa13e
commit
06541dc896
@ -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>
|
||||
```
|
||||
|
||||
@ -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 |
|
||||
Loading…
Reference in new issue