前端分頁:
第一步:前端
<el-tablev-loading="loading":data="dataList.slice((currentPage-1)*pageSize,currentPage*pageSize)"@row-click="clickRow"tooltip-effect="dark"border style="width: 100%;text-align: center"ref="moviesTable"@selection-change="handleSelectionChange">
第二步:
<el-table-column label="序號" sortable width="80" type="index" :index="indexMethod" align="center"></el-table-column>
第三步:在data裏聲明
// 分頁currentPage: 1,pageSize: 5,dataList: [],
第四步:
<!-- 分頁 --><div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5,10,15]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="dataList.length"></el-pagination></div>
第五步:
// 分頁導航/列表序號indexMethod (index) {return (this.currentPage - 1) * this.pageSize + index + 1},//改變列表頁條數大小回調函數handleSizeChange (val) {this.pageSize = val},//改變列表頁當前頁回調函數handleCurrentChange (currentPage) {this.currentPage = currentPage},
後端分頁:
第一步:在data中聲明後端
dataList: [], //列表數據//列表前端分頁pageList: {totalCount: '',pageSize: '',totalPage: '',currPage: ''},//列表分頁輔助類(傳參)pageHelp: {page: 1,limit: 5,sidx: 'id',order: 'asc',},
第二步:api
<el-tablev-loading="loading"ref="moviesTable"@row-click="clickRow"border:data="dataList"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange">
第三步:函數
<!-- 分頁 --><div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageList.currPage":page-sizes="[5,10,15]":page-size="pageList.pageSize"layout="total, sizes, prev, pager, next, jumper":total="pageList.totalCount"></el-pagination></div>
第四步:this
<el-table-column label="序號" type="index" :index="indexMethod" width="80" align="center">
第五步:spa
// 分頁功能indexMethod(index) {return (this.pageList.currPage - 1) * this.pageList.pageSize + index + 1},handleSizeChange(val) {this.pageList.pageSize = valthis.pageHelp.limit = this.pageList.pageSizethis.pageHelp.page = this.pageList.currPagethis.loadTable()},handleCurrentChange (currentPage) {this.pageList.currPage = currentPagethis.pageHelp.page = this.pageList.currPagethis.loadTable()},
第六步:
// 獲取列表數據loadTable () {this.$http.get('/api/~', { params: this.pageHelp }).then((response) => {const data = response.datathis.dataList = data.page.listthis.pageList = data.page})},