mirror of https://github.com/ElemeFE/element
91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
|
## 基础用法
|
||
|
|
适用广泛的基础用法。
|
||
|
|
|
||
|
|
<el-pagination
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="50">
|
||
|
|
</el-pagination>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-pagination
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="50">
|
||
|
|
</el-pagination>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 小型分页
|
||
|
|
在空间有限的情况下，可以使用简单的小型分页。
|
||
|
|
|
||
|
|
<el-pagination
|
||
|
|
small
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="50">
|
||
|
|
</el-pagination>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-pagination
|
||
|
|
small
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="50">
|
||
|
|
</el-pagination>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 复杂分页
|
||
|
|
能够承载复杂交互的分页，显示更多页码。
|
||
|
|
|
||
|
|
<el-pagination
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="1000">
|
||
|
|
</el-pagination>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-pagination
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="1000">
|
||
|
|
</el-pagination>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 附加功能
|
||
|
|
在复杂分页的基础上，根据场景需要，可以添加其他功能模块。
|
||
|
|
|
||
|
|
|
||
|
|
<el-pagination
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
layout="sizes, prev, pager, next, jumper, total"
|
||
|
|
:total="1000">
|
||
|
|
</el-pagination>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-pagination
|
||
|
|
layout="sizes, prev, pager, next, jumper, total"
|
||
|
|
:total="1000">
|
||
|
|
</el-pagination>
|
||
|
|
```
|
||
|
|
|
||
|
|
<script>
|
||
|
|
module.exports = {
|
||
|
|
methods: {
|
||
|
|
handleSizeChange(val) {
|
||
|
|
console.log(`每页 ${val} 条`);
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
console.log(`当前页: ${val}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
## API
|
||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|
|
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||
|
|
| small | 小型分页样式 | Boolean | | false |
|
||
|
|
| page-size | 每页个数 | Number | | 10 |
|
||
|
|
| total | 总个数 | Number | | 0 |
|
||
|
|
| current-page | 当前页数 | Number | | 0|
|
||
|
|
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' |
|
||
|
|
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] |
|
||
|
|
| size-change | pageSize 改变时会触发的事件 | Function | | |
|
||
|
|
| current-change | currentPage 改变时会触发的事件 | Function | | |
|
||
|
|
|