s第一步、引入Element ui 注意：js的引入要在Vue.js的后面

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

第二步、引入分页模板

<el-pagination
 	 background
 	 layout="prev, pager, next"
  	:total="1000">
</el-pagination>

https://element.eleme.cn/#/zh-CN/component/pagination

第三步 、设置参数

将得到的数据与组件进行绑定，因此每个属性都需要加：来与Vue中的数据绑定

        <el-pagination
             background
             :page-size="pageSize"
             :pager-count="5"
             layout="prev, pager, next"
             :total="pageCount"
         >
         </el-pagination>

设置点击事件

上一页和下一页的事件都会触发当前页面的改变 因此我们只需要设置页码的点击事件即可

   <el-pagination
             background
             :page-size="pageSize"
             :pager-count="5"
             layout="prev, pager, next"
             :total="pageCount"
             ===================    
             @current-change="pager"
         >
         </el-pagination>

       // 页码点击切换 事件
          // element UI 封装了这个事件 currentPage里面存放的就是当前页码
           pager:function (currentPage){
               //将当前页码赋值给pageNum
               this.pageNum=currentPage
               // 得到当前页码 请求下一页数据
               axios({
                  url: baseUrl + "product-comments/getCommentsByProId/" +this.productId,
                   methods: "get",
                   params:{
                       pageNum: this.pageNum,
                       pageSize: this.pageSize,
                   }
               }).then((res) => {
                   //得到数据 重新渲染即可
                   let vo=res.data.data;
                   this.productComments=vo
                   this.pageCount=vo.total
               })
           }