• Pagination 分页
    • 基础用法
    • 设置最大页码按钮数
    • 带有背景色的分页
    • 小型分页
    • 附加功能
    • Attributes
    • Events
    • Slot

    Pagination 分页

    当数据量过多时，使用分页分解数据。

    基础用法

    Pagination 分页 - 图1

    设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。

    1. <div class="block">
    2.   <span class="demonstration">页数较少时的效果</span>
    3.   <el-pagination
    4.     layout="prev, pager, next"
    5.     :total="50">
    6.   </el-pagination>
    7. </div>
    8. <div class="block">
    9.   <span class="demonstration">大于 7 页时的效果</span>
    10.   <el-pagination
    11.     layout="prev, pager, next"
    12.     :total="1000">
    13.   </el-pagination>
    14. </div>

    设置最大页码按钮数

    Pagination 分页 - 图2

    默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。

    1. <el-pagination
    2.   :page-size="20"
    3.   :pager-count="11"
    4.   layout="prev, pager, next"
    5.   :total="1000">
    6. </el-pagination>

    带有背景色的分页

    Pagination 分页 - 图3

    设置background属性可以为分页按钮添加背景色。

    1. <el-pagination
    2.   background
    3.   layout="prev, pager, next"
    4.   :total="1000">
    5. </el-pagination>

    小型分页

    在空间有限的情况下，可以使用简单的小型分页。

    Pagination 分页 - 图4

    只需要一个small属性，它接受一个Boolean，默认为false，设为true即可启用。

    1. <el-pagination
    2.   small
    3.   layout="prev, pager, next"
    4.   :total="50">
    5. </el-pagination>

    附加功能

    根据场景需要，可以添加其他功能模块。

    Pagination 分页 - 图5

    此例是一个完整的用例，使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

    1. <template>
    2.   <div class="block">
    3.     <span class="demonstration">显示总数</span>
    4.     <el-pagination
    5.       @size-change="handleSizeChange"
    6.       @current-change="handleCurrentChange"
    7.       :current-page.sync="currentPage1"
    8.       :page-size="100"
    9.       layout="total, prev, pager, next"
    10.       :total="1000">
    11.     </el-pagination>
    12.   </div>
    13.   <div class="block">
    14.     <span class="demonstration">调整每页显示条数</span>
    15.     <el-pagination
    16.       @size-change="handleSizeChange"
    17.       @current-change="handleCurrentChange"
    18.       :current-page.sync="currentPage2"
    19.       :page-sizes="[100, 200, 300, 400]"
    20.       :page-size="100"
    21.       layout="sizes, prev, pager, next"
    22.       :total="1000">
    23.     </el-pagination>
    24.   </div>
    25.   <div class="block">
    26.     <span class="demonstration">直接前往</span>
    27.     <el-pagination
    28.       @size-change="handleSizeChange"
    29.       @current-change="handleCurrentChange"
    30.       :current-page.sync="currentPage3"
    31.       :page-size="100"
    32.       layout="prev, pager, next, jumper"
    33.       :total="1000">
    34.     </el-pagination>
    35.   </div>
    36.   <div class="block">
    37.     <span class="demonstration">完整功能</span>
    38.     <el-pagination
    39.       @size-change="handleSizeChange"
    40.       @current-change="handleCurrentChange"
    41.       :current-page="currentPage4"
    42.       :page-sizes="[100, 200, 300, 400]"
    43.       :page-size="100"
    44.       layout="total, sizes, prev, pager, next, jumper"
    45.       :total="400">
    46.     </el-pagination>
    47.   </div>
    48. </template>
    49. <script>
    50.   export default {
    51.     methods: {
    52.       handleSizeChange(val) {
    53.         console.log(`每页 ${val} 条`);
    54.       },
    55.       handleCurrentChange(val) {
    56.         console.log(`当前页: ${val}`);
    57.       }
    58.     },
    59.     data() {
    60.       return {
    61.         currentPage1: 5,
    62.         currentPage2: 5,
    63.         currentPage3: 5,
    64.         currentPage4: 4
    65.       };
    66.     }
    67.   }
    68. </script>

    显示代码

    Attributes

    参数 说明 类型 可选值 默认值
    small 是否使用小型分页样式 boolean — false
    background 是否为分页按钮添加背景色 boolean — false
    page-size 每页显示条目个数，支持 .sync 修饰符 number — 10
    total 总条目数 number — —
    page-count 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 Number — —
    pager-count 页码按钮的数量，当总页数超过该值时会折叠 number 大于等于 5 且小于等于 21 的奇数 7
    current-page 当前页数，支持 .sync 修饰符 number — 1
    layout 组件布局，子组件名用逗号分隔 String sizes, prev, pager, next, jumper, ->, total, slot 'prev, pager, next, jumper, ->, total'
    page-sizes 每页显示个数选择器的选项设置 number[] — [10, 20, 30, 40, 50, 100]
    popper-class 每页显示个数选择器的下拉框类名 string — —
    prev-text 替代图标显示的上一页文字 string — —
    next-text 替代图标显示的下一页文字 string — —
    disabled 是否禁用 boolean — false

    Events

    事件名称 说明 回调参数
    size-change pageSize 改变时会触发 每页条数
    current-change currentPage 改变时会触发 当前页
    prev-click 用户点击上一页按钮改变当前页后触发 当前页
    next-click 用户点击下一页按钮改变当前页后触发 当前页

    Slot

    name 说明
    — 自定义内容，需要在 layout 中列出 slot

    原文: http://element-cn.eleme.io/#/zh-CN/component/pagination