web 数据展示分页

<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)>
  <el-table-column prop="r" label="序号" width="50"></el-table-column>
  <el-table-column prop="Channel" label="渠道号/唯一标识" width="240"></el-table-column>
  <el-table-column prop="Name" label="名称" width="240"></el-table-column>
  <el-table-column prop="Desc" label="渠道描述" width="240"></el-table-column>
</el-table>

<el-pagination 
  @size-change="handleSizeChange" 
  @current-change="handleCurrentChange"
  :current-page="currentPage" 
  :page-sizes="[10, 20, 50,100]"   :page-size="pagesize" 
  layout="total, sizes, prev, pager, next, jumper" 
  :total="tableData.length">
</el-pagination>

变量
tableData: [],
currentPage: 1,
pagesize: 20

handleSizeChange: function(size) {
    this.pagesize = size
    console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage) {
    this.currentPage = currentPage
    console.log(this.currentPage) //点击第几页
},

注意：改变tableData数据后，需要设置currentPage = 1

refer：https://www.cnblogs.com/zhoulifeng/p/9395295.html