# pagination 分页器组件 OK

# 基础用法

ykc-pagination 的基础用法。

跳至

页共80条

每页

条

<template>
  <div class="doc">
    <ykc-pagination
      :total="total" :pageSize.sync="pageSize" :currentPage="currentPage"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"
    ></ykc-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        total: 80,
        pageSize: 10,
        currentPage: 1,
      };
    },
    methods: {
      handleSizeChange(e) {
        console.log('使用了sync修饰符', this.pageSize)
      },
      handleCurrentChange(val) {
        console.log('没有使用了sync修饰符', val)
      },
    },
  };
</script>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
page-size	否	每页显示条目个数，支持 `.sync` 修饰符	number	无	10
current-page	否	当前页数，支持 `.sync` 修饰符	number	无	1
total	否	总条目数	number	无	0
pager-count	否	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	5
layout	否	组件布局，子组件名用逗号分隔	string	`prev, pager, next, jumper, total`	'prev, pager, next, jumper, total'
prev-text	否	替代图标显示的上一页文字	string	无	无
next-text	否	替代图标显示的下一页文字	string	无	无
disabled	否	是否禁用	boolean	无	false
hide-on-single-page	否	只有一页时是否隐藏	boolean	无	false
translate	否	多语言翻译	Function(path: string, options: object) => string	无	`{goto: '跳至', pagesize:'条/页',total:'共'+options.total+'条',pageClassifier: '页'}`
align	否	分页器对齐方式	left / center / right	无	left
min-page-size-value	否	每页最少条目数	number	无	1
rewriteElPaginationComponents	否	在 `el-pagination` 创建后，可重写其内部组件	Function(vm)	无	无

# Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页

# Slots

插槽名称	说明
change-size	自定义改变 pageSize

← table card-page →