page分页API文档

wb-page参数：

参数	说明	类型	可选	默认	必填
background	是否为分页按钮添加背景色	boolean	true/false	false	否
hideOnSinglePage	只有一页时是否隐藏	boolean	true/false	false	否
total	总条数	number	-	-	是
pageSize	每页显示多少条	number	-	10	否
pageSizes	每页显示个数选择器的选项设置	number[]	-	[10, 20, 30, 40, 50, 100]	否
currentPage	当前页数	number	-	1	否
layout	组件布局，子组件名用逗号分隔	String	-	prev, pager, next, jumper, ->, total, slot	否

• layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
• prev表示上一页。
• next为下一页。
• pager表示页码列表。
• ->后的元素会靠右显示。
• jumper表示跳页元素。
• total表示总条目数。
• size用于设置每页显示的页码数量。

注意：（属性可根据el-page，阅读及使用）

• event事件

参数	说明	回调参数
currentChange	当前页数改变时候触发	value(返回当前页数)
sizeChange	选择每页显示多少条的时候触发（设置选择器后，才生效）	value(返回每页条数)

注意（只封装了常用的，不全，但是够用！可根据需求添加自定义事件）

使用组件案例：

<template>
   <!-- 分页组件 -->
    <div class="page">
      <wb-page :data="params"
               @currentChange="currentChangeFn"
               @sizeChange="sizeChangeFn"
      ></wb-page>
    </div>
</template>

<script>
  export default {
    data () {
      return {
      
	  }
    },
    methods:{
      // 页数改变时候触发
      currentChangeFn (val) {
      	console.log(val)	// 当前页
      },
        // 选择每页显示多少条的时候触发（设置选择器后，才生效）
      sizeChangeFn (val){
      	console.log(val)	// 每页显示多少条
      },
    }
  }
</script>

<style scoped>

</style>