分页 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 ]
layout	设置分页组件布局	string	total,sizes, prev, pager, next, jumper	total, ->, sizes, prev, pager, next, jumper

HcPagination 事件

事件名	说明	参数
size-change	每页数量改变时触发	改变后的值
current-change	当前页码值改变时触发	改变后的值
current-before-change	页码值改变前触发（可取消翻页动作）	{ cancel: false }