分页组件

基本使用

共 30 条

• 10条/页
• 20条/页
• 30条/页
• 50条/页

无数据

• 1
• 2
• 3

前往

页

• 1
• 2
• 3

前往

页

1/10

<template>
  <el-card>
    <pagination :total="30" :page.sync="page" :limit.sync="limit" @pagination="pagination"></pagination>
    <pagination
      :total="30"
      :page.sync="page"
      :limit.sync="limit"
      @pagination="pagination"
      layout="prev, pager, next, jumper"
    ></pagination>
    {{page}}/{{limit}}
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        limit: 10,
      };
    },
    methods: {
      pagination(pagination) {
        this.page = pagination.page;
        this.limit = pagination.pageSize;
      },
    },
  };
</script>

<style lang="scss" scoped></style>

显示代码 复制代码 复制代码

API

Pagination

参数	说明	类型	可选值	默认值
total	总条目数	number	—	—
page	当前页数，支持 .sync 修饰符	number	—	1
limit	每页显示条目个数，支持 .sync 修饰符	number	—	10
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	total, sizes, prev, pager, next, jumper
pageSizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50]
background	是否为分页按钮添加背景色	boolean	—	true
autoScroll	触发分页事件后是否自动滚动到顶部	boolean	-	false

Pagination Events

事件名称	说明	回调参数
pagination	触发分页、每页条数时触发；	page 和 limit，默认为{page,limit};如果通过全局配置修改了 paginationPageKey 和 paginationLimitKey 则以它为准