Pagination 分页

基础用法

<template>
  <plv-pagination
    :total="100"
    :page-size.sync="pageSize"
    v-model="currentPage"
    @currentChange="currentChange"
    @pageSizeChange="pageSizeChange" />
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      };
    },
    methods: {
      currentChange(page) {
        console.info('currentChange', page);
      },
      pageSizeChange(size) {
        console.info('pageSize', size);
      }
    }
  };
</script>

显示代码

设置总条数进行分页

total 和 totalRecord 都能控制页码的显示；total 的优先级比 totalRecord 的高。

<template>
  <plv-pagination
    :total-record="200"
    :page-size.sync="pageSize"
    v-model="currentPage" />
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      };
    }
  };
</script>

显示代码

小分页

<template>
  <plv-pagination
    small
    :total="20"
    :page-size.sync="pageSize"
    v-model="currentPage" />
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      };
    }
  };
</script>

显示代码

简单的分页

<template>
  <div>
    <plv-pagination
      simple
      :total="20"
      :page-size.sync="pageSize"
      v-model="currentPage"></plv-pagination>
    <plv-pagination
      small
      simple
      :total="20"
      :page-size.sync="pageSize"
      v-model="currentPage"></plv-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      };
    }
  };
</script>

显示代码

自定义布局

<template>
  <div>
    <div class="page-title">完整的布局</div>
    <plv-pagination
      align="left"
      :total="20"
      :page-size.sync="pageSize"
      :layout="['prev', 'pager', 'next', 'total', 'sizes', 'jumper']"
      v-model="currentPage"></plv-pagination>
    <div class="page-title">调整前一页与后一页位置</div>
    <plv-pagination
      align="left"
      :total="20"
      :page-size.sync="pageSize"
      :layout="['sizes', 'pager', 'prev', 'next']"
      v-model="currentPage"></plv-pagination>
    <div class="page-title">简单的布局</div>
    <plv-pagination
      align="left"
      :total="20"
      :page-size.sync="pageSize"
      :layout="['prev', 'pager', 'next']"
      v-model="currentPage"></plv-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10
      };
    }
  };
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
currentPage / v-model	当前页	Number	-	1
total	总页数，优先级大于由totalRecord与pageSize计算出来的值	Number	-	0
totalRecord	总条目数	Number	-	0
pageSize	每页显示条目个数，支持 .sync 修饰符	Number	-	10
pageSizes	每页条目数选项，例如 [5, 10, 15]	Number[]	-	[10, 20, 50, 100]
small	是否使用小型分页器	Boolean	-	false
simple	是否使用简单样式分页器	Boolean	-	false
align	对齐方式	String	left center right	center
layout	组件布局	String[]	sizes pager prev next jumper total	['prev', 'pager', 'next', 'sizes', 'jumper']
hideOnSingle	只有一页时是否隐藏分页组件	Boolean	-	true
sizesPlacement	每页显示数量弹层位置	String	top bottom	bottom

Events

事件名称	说明	回调参数
pageSizeChange	pageSize 改变时会触发	每页条数
currentChange	当前页改变时会触发	当前页