# 分页 Pagination

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

# 基础用法

基本用法

包括如何翻页、跳页、更改每页数量,如何触发事件等等

<title>基本用法</title>
<describe>包括如何翻页、跳页、更改每页数量,如何触发事件等等</describe>
<template>
  <div class="demo-pagination">
    <div class="demo-component">
      <hc-pagination
        :page-total="pageTotal"
        :page-index="pageIndex"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        @size-change="sizeChange"
        @current-change="currentChange"
        @paginationchanged="paginationChanged"
        @current-before-change="currentBeforeChange"
      ></hc-pagination>
    </div>
  </div>
</template>

<script>
export default{
  data: function () {
    return {
      pageTotal: 10000,
      pageIndex: 2,
      pageSize: 50,
      pageSizes: [20, 50, 100, 200, 500]
    }
  },
  methods: {
    sizeChange: function (e) {
      console.log('sizeChange', e)
    },
    paginationChanged: function (e) {
      console.log('paginationChanged', e)
    },
    currentBeforeChange: function (e) {
      console.log('currentBeforeChange', e)
    },
    currentChange: function (e) {
      console.log('currentChange', e)
    }
  }
}
</script>

# 属性及事件

# HcPagination 属性

名称 说明 类型 可选值 默认值
page-total 总条目数 number -- --
page-index 当前页索引 number -- --
page-size 每页显示条目个数 number -- --
page-sizes 每页显示个数选择器的选项设置 number[] -- [ 20, 50, 100, 200 ]

# HcPagination 事件

事件名 说明 参数
sizeChange 每页数量改变时触发 改变后的值
currentChange 当前页码值改变时触发 改变后的值
paginationChanged 当前页码或者每页数量值改变时触发 { pageIndex: number, pageSize: number }
currentBeforeChange 页码值改变前触发(可取消翻页动作) { cancel: false }