vue+elementui分页

1.后台分页

<el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :current-page="currentPage"
    :page-size="10"
    @current-change="current_change"
></el-pagination>

layout：组件布局，子组件用逗号分隔
total：总条目数
current-page：当前页数（默认1）
page-size：每页显示条目数
current-change：currentPage改变时触发

current_change: function(currentPage) {
      this.currentPage = currentPage;  //改变当前页数
      this.cellGrid(currentPage);  //请求下一页数据
 },

请求后台数据时传参

params: {
   limit: 10,  //每页条数
   page: this.currentPage  //当前页数
 }

2.前端分页
在table组件中添加：

:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

或者：（splice会改变原数组，需要一个空数组接收）

tableData.splice((currentPage-1)*pagesize,pagesize)

分页：

 <el-pagination
   background
   layout="prev, pager, next"
   :total="total"
   :page-size="5"
   @current-change="current_change"
 ></el-pagination>

data初始数据：

data:{
    return {
      total: 100,
      pagesize: 5,
      currentPage: 1
    }
}

切换当前页

current_change: function(currentPage) {
      this.currentPage = currentPage;
    },