element-ui官網中有分頁的組件，在vue中可以進行調用，引入組件之後自己在傳一下參數給後端即可。
效果圖：
HTML部分：
<div id="app">
<el-pagination class="page"
background //設置背景顏色
@size-change="handleSizeChange" //當每頁條數改變是會觸發該事件
@current-change="handleCurrentChange"//當前頁改變時會觸發
:page-size="pageSize" //設置每頁的條數
:page-sizes="[10, 20, 50, 100]" //設置一個數組，可以選擇每頁展示多少條數據
layout="total, sizes, prev, pager, next"
:total=totalCount> //設置後端一共傳過來多少條數據
</el-pagination>
</div>
方法：
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script>
export default {
created(){ //鉤子函數
this.load()
},
data(){
return {
currentPage:1,//初始頁
courseId:'',//後端需要的參數，看個人是否需要
pageSize:10,//每頁的數據
pageNum:1, //後端需要的參數，看個人是否需要
tableData:[],//定義一個數組，用來接收後端返回的內容
totalCount：''//返回的總數據數
}；
}，
methods：{
// 初始頁currentPage、初始每頁數據數pagesize和數據data
handleSizeChange: function (size) {
this.pageSize = size;
console.log(this.pageSize) //每頁下拉顯示數據
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //點擊第幾頁
},
load(){
let that = this;
var tableData = [];
var totalCount='';
console.log(that.courseId);
axios.get("http://localhost:8002/superstar/questCourseIntegralListPage?",{params:{
courseId:this.$route.query.courseId,
page:that.pageNum,
size:that.pageSize
}}).then(function(response){
console.log("這是response返回數據"+response.data);
that.tableData=response.data.list; //根據返回的內容來確定
})
}
</script>
HTML部分，這裏使用的是el-table
<el-table class = "table" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe border :default-sort="{prop: 'date', order: 'descending'}">
</el-table>