纯前端实现分页
目录
纯前端实现分页
关键词由CSDN通过智能技术生成
前端自己实现el-pagination分页
纯前端实现分页
首先,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
}