ElementUI 提供了 el-pagination 组件，只要配置相应得参数和事件，即可实现分页。

1.前端实现分页

适合后端接口返回的总记录数不太多的场景(通常在1000条以内)。

<template>
...
<!--引入elementui的分页组件，前端实现的分页-->
 <el-pagination
       background
       :current-page.sync="currentPage"
       layout="prev, pager, next"
       :page-size="pageSize"
       :pager-count="15" 
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :total="courseList.length">
 </el-pagination>
</template>

<script>
   export default {
      name: "MyCourseListLefter",

     data(){
         return{
            pageSize: 10,   //每页的记录数
            currentPage: 1, //当前的页号，
            courseList:[]   //总记录数据集合
         }
     }, 
     //把当前分页数据当成一个计算属性
      computed:{
            coursePager: function () {
                return this.courseList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            }
      }, 
      methods:{
          // 初始页currentPage、初始每页数据数pagesize和数据data
          handleSizeChange: function (size) {
              this.pageSize = size;
          },
          handleCurrentChange: function (currentPage) {
              this.currentPage = currentPage;
          },
          ...
     }  
}   
</script>

其中 ，:pager-count="15" 表示分页最多显示15个分页按钮。 ==注意：一定要添加 :current-page.sync="currentPage" 属性，可以解决页号不同步的问题。==

2.后端接口实现分页

如果总记录条数比较多，适合采用调用后端接口，每次返回该分页的数据，ElementUI分页组件仅仅负责渲染该分页数据。

<template>
...
    <!--引入elementui的分页组件，后端实现的分页，前端负责渲染-->
   <el-pagination
          background
          layout="prev, pager, next"
          :total="pager.total"
          :page-size="pager.size"
          @current-change="handleCurrentChange"
          :pager-count="15"
      >
  </el-pagination>
</template>

<script>
   export default {
      name: "MyCourseListLefter",

     data(){
         return{
            //分页对象
            pager: {
              //表示当前的分页数据
              records: [],
              total: 150, //总记录数
              size: 10, //每一页的记录数
              current: 1, //当前的分页号
              orders: [],
              optimizeCountSql: true,
              searchCount: true,
              countId: null,
              maxLimit: null,
              pages: 15 //总页数
           }
         }
     }, 

   methods:{
      handleCurrentChange: function (currentPage) {
        let pager = {
           catalogName: this.$store.state.currentCatalogNameData,
           currentPage: currentPage
        }
       //这里去调用后端分页查询接口。
      this.$store.dispatch("QueryArticleByCatalogNameAndPageNum", pager).then(response => {
           let code = response.data.code;
           if (code === 200) {
               this.pager = response.data.data;
            }
          }).catch((err) => {
               console.log(err)
          });
      },
      ...
   }  
 } 
</script>

注意：后端实现分页时，前端是不需要获得总记录数据集合。只需在pager对象中包含总记录数量即可，这样通过总记录数/每页记录数，可以计算出总页数。并且总是默认从第一页开始渲染。后端分页接口实现推荐使用Mybatis-Plus的IPage接口或者Springboot的PageHelper实现。