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

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

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

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

首先引用iview的分页

其中total是总条数，page-size是每页条数  page-size-opts是页数   changeNum方法是每页条数变化     changePage方法把封装好的每页条数和页数传到调用此组件的父页面

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

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

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

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

//父页面引用

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

转载于:https://www.cnblogs.com/wenchao666/p/10762474.html