前端分页与后端分页

前端分页：

第一步：

<el-table

　　v-loading="loading"

　　:data="dataList.slice((currentPage-1)*pageSize,currentPage*pageSize)"

　　@row-click="clickRow"

　　tooltip-effect="dark"

　　border style=" 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',

},

第二步：

<el-table

　　 v-loading="loading"

　　ref="moviesTable"

　　@row-click="clickRow"

　　border

　　:data="dataList"

　　tooltip-effect="dark"

　　style=" 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>

第四步：

<el-table-column label="序号" type="index" :index="indexMethod" width="80" align="center">

第五步：

// 分页功能

indexMethod(index) {

　　return (this.pageList.currPage - 1) * this.pageList.pageSize + index + 1

},

handleSizeChange(val) {

　　this.pageList.pageSize = val

　　this.pageHelp.limit = this.pageList.pageSize

　　this.pageHelp.page = this.pageList.currPage

　　this.loadTable()

},

handleCurrentChange (currentPage) {

　　this.pageList.currPage = currentPage

　　this.pageHelp.page = this.pageList.currPage

　　this.loadTable()

},

第六步：

// 获取列表数据

loadTable () {

　　this.$http

　　.get('/api/~', { params: this.pageHelp })

　　.then((response) => {

　　const data = response.data

　　this.dataList = data.page.list

　　this.pageList = data.page

　　})

},