vue中实现分页

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/element-ui@2.13.2/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>

组件地址：https://element.eleme.cn/#/zh-CN/component/pagination