基于iview 封装一个vue 表格分页组件

iview 是一个支持中大型项目的后台管理系统ui组件库，相对于一个后台管理系统的表格来说分页十分常见的

iview是一个基于vue的ui组件库，其中的iview-admin是一个已经为我们搭好的后天系统框架，十分方便。

下面我们就简单封装一个分页插件

首先引用iview的分页

<Page :total="total" :page-size="pageSize" :page-size-opts="[10]" show-sizer show-total @on-change="changePage" @on-page-size-change="changeNum"></Page>
其中total是总条数，page-size是每页条数  page-size-opts是页数   changeNum方法是每页条数变化     changePage方法把封装好的每页条数和页数传到调用此组件的父页面

props: ['total', 'changePageCallback'], //changePageCallback是回调的方法

changePage (page) {
  this.changePageCallback(page, this.pageSize);
  // 这边调用 回调函数将 页码返回上一级调用的页面
},

changeNum (num) {
  this.pageSize = num;
}

然后在父页面简单调用就可以了

<page-sizes :total="total" :changePageCallback="changePageCallback"></page-sizes>//父页面引用

// 分页回调
changePageCallback (page, pageSize) {
   //此时的page为传过来的页数，pageSize为每页条数
},