pagination 分页

pagination主要是为了支持在不确定数量且具有分页时的效果展示而特制的分页组件。

代码演示

下面例子是一个不确定总条目数的分页：

<template>
  <div>
    <pagination :current.sync="1" @change="pageChange" :noMore="noMore"/>
  </div>
</template>

export default {
  data () {
    return {
      noMore: false
    }
  },
  methods: {
    pageChange (page) {
      console.log(page)
      if (page >= 11) {
        this.noMore = true
      } else {
        this.noMore = false
      }
    }
  }
}

效果如下：

下面是一个已确定总条目数的分页：

<template>
  <div>
    <div class="view-init">
      <pagination :total="total" :current.sync="1" @change="pageChange" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      total: 62
    }
  },
  methods: {
    pageChange (page) {
      console.log(page)
    }
  }
}
  

效果如下：

API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | current | 当前页码，支持 .sync 修饰符 | Number | 1 | | noMore | 是否还有更多分页 | Boolean | false | | total | 总条目数 | Number | - | | pageSize | 每页显示条目个数 | Number | 10 |

事件

| 事件名称 | 说明 | 回调参数 | | :--- | :--- | :--- | | change | 页码发生变更 | function(page) |