使用Element UI实现分页

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

第三步 、设置参数

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	‘prev, pager, next, jumper, ->, total’
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	-

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

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

设置点击事件

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

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

   
         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
               })
           }