el-pagination是ElementUI的分页组件。

1.前端实现分页展示

总体思路：前端调用后端接口，返回全部数据集，前端通过计算属性实现分页。

1).分页组件部分代码展示

    <!--注意：一定要添加current-page.sync属性，保证组件页码同步更新-->
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <el-pagination
                :current-page.sync="currentPage"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :pager-count="15"
                layout="prev, pager, next"
                :total="itemsList.length">
        </el-pagination>
    </div>

2).分页逻辑代码展示

data: {
       pageSize: 8,   //每页的记录数
       currentPage: 1, //当前的页号，
       catalogList: [
           '全部'
       ],
       itemsList: [

       ],
 },

//把当前分页数据当成一个计算属性
computed:{
    itemsPager: function () {
       return this.itemsList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
},

methods: {
    //调用后端接口返回数据集
   initItemsList() {
        queryItemsListByCatalogName(this.catalogList[this.currentActiveIndex]).then(resp => {
                    if (resp.data.code === 200) {
                        this.itemsList = resp.data.data;
                        //当前板块下的商品列表信息
                        console.log("---当前板块下的商品列表信息----")
                        console.log(this.itemsList);
                    }
                })
    },

    changeCatalogList(index, catalogName) {
         console.log("索引是：" + index + ",分类的名字是：" + catalogName);
         this.currentActiveIndex = index;
         this.currentPage = 1; //把当前页号重新置为1；
         this.initItemsList();
    },

    handleSizeChange: function (size) {
        this.pageSize = size;
        //console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
       this.currentPage = currentPage;
       //console.log(this.currentPage)  //点击第几页
   }
} 

3).数据展示部分代码

<div v-for="(i,index) in itemsPager" :key="i.id" class="goods-mess layui-col-md3">
  <div class="goods-img">
       <a href="goodsMess.html">
          <img :src="i.pic"/>
       </a>
   </div>
   <p class="goods-price">￥{{i.price}}</p>
      <p class="goods-sellnum">月销：{{i.number}}笔</p>
      <p class="goods-biaoti">
         <a href="goodsMess.html">
            {{i.name}}
         </a>
      </p>
</div>

2.通过调用后端分页接口实现

总体思路：前端调用后端分页接口，返回一个分页对象，前端通过解析分页对象实现分页展示。

1).后端分页接口实现

这里以Mybatis-Plus的Page类举例，你也可以选择你自己喜欢的分页技术，比如：SpringDataJpa,或者自定义分页工具类等等。

@GetMapping("/pager/catalog")
    public R queryCatalogListByCatalogName(@RequestParam("catalogName") String catalogName,@RequestParam("currentPageNumber") Integer currentPageNumber) {
        try {
            Page<Items> page = itemsService.queryItemsPagerByCatalogName(catalogName,currentPageNumber);
            return R.success("查询指定板块下的商品分页列表成功！", page);
        } catch (Exception ex) {
            ex.printStackTrace();
            return R.error("程序出现异常！");
        }
    }

2).分页组件部分代码展示

    <!---方式二：后端实现的分页-->
    <!--注意：一定要添加current-page.sync属性，保证组件页码同步更新-->
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <el-pagination
                background
                :current-page.sync="pager.current"
                layout="prev, pager, next"
                :page-size="pager.size"
                :pager-count="pager.pages"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :total="pager.total">
        </el-pagination>
    </div>

3).分页逻辑代码展示

data: {
    catalogList: [
                '全部'
    ],
    itemsList: [

    ],
    //用户分页对象
    pager:{
       current: 1
   }
 },

methods: {

     changeCatalogList(index, catalogName) {
                console.log("索引是：" + index + ",分类的名字是：" + catalogName);
                this.currentActiveIndex = index;
                this.pager.current =1;
                this.initCurrentPager();
     },

     //初始化咱们的分页对象
     initCurrentPager(){
         let params = {
             catalogName: this.catalogList[this.currentActiveIndex],
             currentPageNumber: this.pager.current
         };

        queryItemsPagerListByCatalogName(params).then(resp=>{
             if(resp.data.code === 200){
                  this.pager = resp.data.data;
                  console.log("-------------当前的分页对象是------------")
                  console.log(this.pager);
                  this.itemsList = this.pager.records;
              }
           })
        },

       // 换页
       handleCurrentChange: function(val) {
           console.log("-----点击的当前页号-------")
           console.log(val);
           this.pager.current =val;
           this.initCurrentPager();
       },
       // 每页显示数量
       handleSizeChange: function(val) {
           console.log(val);
       }
} 

4).数据展示部分代码

<div v-for="(i,index) in itemsList" :key="i.id" class="goods-mess layui-col-md3">
    <div class="goods-img">
        <a href="goodsMess.html">
           <img :src="i.pic"/>
        </a>
    </div>
    <p class="goods-price">￥{{i.price}}</p>
    <p class="goods-sellnum">月销：{{i.number}}笔</p>
    <p class="goods-biaoti">
       <a href="goodsMess.html">
          {{i.name}}
       </a>
    </p>
</div>

3.两种实现思路对比

• 前端实现方式：适用于数据量不大的情形，实现起来比较简单。
• 后端分页接口实现方式：适用与数据量很大，降低前端渲染负担。