vue+element-ui 前端实现分页效果
1.使用el-pagination分页插件
<!--分页条--> <div class="page"> <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"> </el-pagination> </div>
2.在你的数据表格中绑定tables.slice((currentPage-1)pagesize,currentPagepagesize) 关键!!!
<el-table :data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe ref="multipleTable" tooltip-effect="dark"></el-table>
3.在date中定义参数
currentIndex: '', currentPage: 1, //初始页 pagesize: 10, // 每页的数据
4.在methods中定义方法
handleSizeChange: function(size) { this.pagesize = size; // console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage) { this.currentPage = currentPage; // console.log(this.currentPage) //点击第几页 },