分页组件

分页组件对el-pagination进行了封装，支持用户自定义每页显示条数，条数选择功能。

1、使用方法

因分页组件已经进行了全局引用，在各vue页面中只需要直接调用 waf-pagination 组件即可

<!-- 分页组件使用-->
<waf-pagination :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
<!-- total：总页数; page.sync：当前页数（.sync属性双向绑定）limit.sync: 每页显示条目数；@pagination：组件回调方法 -->

// script 示例代码
// 注意：这里this.getList()需要在mounted后再调用，如果在created时，调用，则第一次不能用自定义的每页条目数，只能是默认的PAGE_SIZE值
// 因为created时，waf-pagination组件还未加载完成，自定义的属性还没有设置值
import { PAGE_SIZE } from "@/store/mutation-types"
data() {
    return {
      listQuery: {
        page: 1,
        limit: PAGE_SIZE,
        total: 0
      }
    }
},
mounted: function() {
  this.getList()
},
methods: {
 getList() {
     // 列表查询调用api接口
 }
}

2、组件参数说明

分页组件由el-pagination重新封装，所以原有的属性按官方文档一样来使用，这里只列举自定义的一些属性

参数	说明	类型	可选值	默认值
custom	是否采用自定义配置	boolean	—	true
total	总条目数	number	—	—
page	当前页数，支持 .sync 修饰符	number	—	10
limit	每页显示条目个数，支持 .sync 修饰符	number	—	—
@pagination	组件回调方法（回调方法名可自定义）	string	—	—

3、示例访问

示例文件路径：src/views/demo/PaginationDemo.vue
本地访问地址： http://localhost:8080/#/demo/pagination