1. 首先需要在項目中引入Element-UI的組件庫，使用以下命令，不會引入的請自行百度。

npm i element-ui -S
Element官網(wǎng)地址：https://element.eleme.cn/#/zh-CN/component/changelog

2. 去Element-UI官網(wǎng)組件庫找到合適的分頁插件，并把他引入到你的Vue項目中，比如下面的是我的項目中使用的插件（注意div包裹的全部內(nèi)容以及div需要在<template></template>標(biāo)簽里面）

<!--分頁插件--><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="totalPage"></el-pagination></div

官網(wǎng)鏈接：https://element.eleme.cn/#/zh-CN/component/pagination
其中分頁插件屬性官網(wǎng)有介紹，可以詳細(xì)的去看看。

其中最重要的是圖片中的兩個函數(shù)方法的調(diào)用
比如在我的項目中代碼如下，其中val值就是我們需要傳給后端的。

  //改變每頁條數(shù)handleSizeChange(val) {let that = this ;this.axios.get('http://localhost:8081/eom/selectBoxAndMeter?pageSize='+val).then(function(res){that.totalPage=res.data.data.total;that.dataList = res.data.data.list;}).catch(function(err){console.log(err);});},

//改變頁數(shù)handleCurrentChange(val) {let pageNum=val;let that = this ;this.axios.get('http://localhost:8081/eom/selectBoxAndMeter?pageNum='+pageNum).then(function(res){that.totalPage=res.data.data.total;that.dataList = res.data.data.list;}).catch(function(err){console.log(err);});},

方法里面的axios的get請求詳細(xì)的地址在圖片中有展示，接下來就是后端代碼部分

1. 首先需要引入分頁插件PageHelper，引入坐標(biāo)如下：

 		<!--分頁插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency>

引入插件后在SpringBoot項目中無需任何配置，需要值得注意的是，如果引入PageHelper插件后項目運行報錯或者啟動報錯，那大概就是版本沖突問題，比如我的版本是1.4.1，解決辦法可以參考鏈接：開發(fā)中遇到的問題合集

我的Controller層代碼如下：

 @RequestMapping(value = "selectBoxAndMeter")public Result selectBoxAndMeter(@RequestParam(value = "pageNum",required = false,defaultValue = "1")Integer pageNum,@RequestParam(value = "pageSize",required = false,defaultValue = "5")Integer pageSize){return eomService.selectBoxAndMeter(pageNum,pageSize);}

需要注意的是@RequestParam接受的pageNum和pageSize名稱需要和前端請求的名稱相同，還有請求路徑映射一般要用 @RequestMapping(value = “”)的形式。

接下來就是最重要的service層代碼：

		PageHelper.startPage(pageNum,pageSize);List<TgInfoDto> infoLists = eomMapper.selectBoxAndMeter();//分頁集合PageInfo<TgInfoDto> pageInfo=new PageInfo<>(infoLists);if (infoLists.isEmpty()){return Result.fail(400,"集合為空");}return Result.success(pageInfo);

我們只需要關(guān)注PageHelper.startPage(pageNum,pageSize)方法和 PageInfo pageInfo=new PageInfo<>(infoLists)方法，雖然我們需要查詢和返回的集合是infoLists，但是使用分頁插件后我們需要把他封裝進 PageInfo對象中，最終返回的是 PageInfo對象，其中 PageInfo源碼如下：

其中圖片上面的數(shù)據(jù)，系統(tǒng)會給我們封裝好，并且返回給前端，并且包括你自己封裝好的集合。
接下來我們使用Postman測試一下，結(jié)果如下：


經(jīng)過測試可以看到，插件已經(jīng)把我們需要的數(shù)據(jù)已經(jīng)封裝好了。