纯前端实现分页

纯前端实现分页

首先,el-table中:

 <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)">
 </el-table>

然后,在el-pagination中:

<el-pagination
   background
   layout="prev, pager, next"
   @current-change="handleCurrentChange"
   :current-page="currentPage"
   :page-size="pageSize"
   :total="total"
   class="page-bar-reset">
</el-pagination>

接下来,在data中定义变量:

data () {
    return {
      list: [],
      total: 0,
      pageSize: 25,
      currentPage: 1
    }
  },

最后,在methods中定义切换页面的方法,就大功告成了:

handleCurrentChange (val) {
	this.currentPage = val
}