|
|
@@ -6,10 +6,21 @@
|
|
|
|
|
|
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
|
|
|
```html
|
|
|
-<el-pagination
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="50">
|
|
|
-</el-pagination>
|
|
|
+<div class="block">
|
|
|
+ <span class="demonstration">页数较少时的效果</span>
|
|
|
+ <el-pagination
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="50">
|
|
|
+ </el-pagination>
|
|
|
+</div>
|
|
|
+<div class="block">
|
|
|
+ <span class="demonstration">大于7页时的效果</span>
|
|
|
+ <el-pagination
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
```
|
|
|
:::
|
|
|
|
|
|
@@ -27,77 +38,60 @@
|
|
|
```
|
|
|
:::
|
|
|
|
|
|
-### 复杂分页
|
|
|
-
|
|
|
-能够承载复杂交互的分页。
|
|
|
-
|
|
|
-:::demo `total`只要足够大，就会产生复杂分页的样式。
|
|
|
-```html
|
|
|
-<el-pagination
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="1000">
|
|
|
-</el-pagination>
|
|
|
-```
|
|
|
-:::
|
|
|
-
|
|
|
### 附加功能
|
|
|
|
|
|
:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
|
|
|
|
|
|
```html
|
|
|
<template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-pagination
|
|
|
- @sizechange="handleSizeChange"
|
|
|
- @currentchange="handleCurrentChange"
|
|
|
- :current-page="5"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
- :page-size="100"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :total="1000">
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-pagination
|
|
|
- @sizechange="handleSizeChange"
|
|
|
- @currentchange="handleCurrentChange"
|
|
|
- :current-page="5"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
- :page-size="100"
|
|
|
- layout="sizes, prev, pager, next"
|
|
|
- :total="1000">
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-pagination
|
|
|
- @sizechange="handleSizeChange"
|
|
|
- @currentchange="handleCurrentChange"
|
|
|
- :current-page="5"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
- :page-size="100"
|
|
|
- layout="prev, pager, next, jumper"
|
|
|
- :total="1000">
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-pagination
|
|
|
- @sizechange="handleSizeChange"
|
|
|
- @currentchange="handleCurrentChange"
|
|
|
- :current-page="5"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
- :page-size="100"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="1000">
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">显示总数</span>
|
|
|
+ <el-pagination
|
|
|
+ @sizechange="handleSizeChange"
|
|
|
+ @currentchange="handleCurrentChange"
|
|
|
+ :current-page="5"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">调整每页显示条数</span>
|
|
|
+ <el-pagination
|
|
|
+ @sizechange="handleSizeChange"
|
|
|
+ @currentchange="handleCurrentChange"
|
|
|
+ :current-page="5"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="sizes, prev, pager, next"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">直接前往</span>
|
|
|
+ <el-pagination
|
|
|
+ @sizechange="handleSizeChange"
|
|
|
+ @currentchange="handleCurrentChange"
|
|
|
+ :current-page="5"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="prev, pager, next, jumper"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">完整功能</span>
|
|
|
+ <el-pagination
|
|
|
+ @sizechange="handleSizeChange"
|
|
|
+ @currentchange="handleCurrentChange"
|
|
|
+ :current-page="5"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="400">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
@@ -113,10 +107,74 @@
|
|
|
</script>
|
|
|
```
|
|
|
:::
|
|
|
-
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let demos = document.querySelectorAll('.source');
|
|
|
+ let firstDemo = demos[0];
|
|
|
+ let lastDemo = demos[demos.length - 1];
|
|
|
+ firstDemo.classList.add('first');
|
|
|
+ lastDemo.classList.add('last');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
<style>
|
|
|
- .el-col {
|
|
|
- margin-bottom: 10px;
|
|
|
+ .demo-pagination .first {
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .first .block {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 30px 0;
|
|
|
+ text-align: center;
|
|
|
+ border-right: solid 1px #EFF2F6;
|
|
|
+ flex: 1;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .first .demonstration {
|
|
|
+ display: block;
|
|
|
+ color: #8492a6;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .last {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .last .block {
|
|
|
+ padding: 30px 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: solid 1px #EFF2F6;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .last .demonstration {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8492a6;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-pagination .last .demonstration + .el-pagination {
|
|
|
+ float: right;
|
|
|
+ width: 70%;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
|
SkyAo