vue前端分页

表格加分页

<el-table
 :data="tableDatas"
  height="550"
  style="width: 100%"
>
  <el-table-column
    type="index"
    label="序号"
  />
   <el-table-column
    type="name"
    label="名称"
  />
</el-table>  
<el-pagination
   :total="page.total"
    :current-page="page.page"
    :page-sizes="[10, 20]"
    :page-size="page.limit"
    :pager-count="3"
    layout="total,  prev, pager, next, sizes"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />

接口返回所有数据

data(){
	 page: {
        page: 1,
        limit: 20,
        total: 0
      }
}

this.allData = res.data[0].rows
this.tableDatas = this.allData.slice((this.page.page - 1) * this.page.limit, this.page.page * this.page.limit)
this.page.total = res.data[0].total


// 调整每页条数
    handleSizeChange(val) {
      this.page.limit = val
      // this.fetchDatas()
    },
    // 调整当前页
    handleCurrentChange(val) {
      this.page.page = val
      this.tableDatas = this.allData.slice((this.page.page - 1) * this.page.limit, this.page.page * this.page.limit)
    }