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是否使用小型分页样式booleanfalse
background是否为分页按钮添加背景色booleanfalse
page-size每页显示条目个数,支持 .sync 修饰符number10
total总条目数number
page-count总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性Number
pager-count页码按钮的数量,当总页数超过该值时会折叠number大于等于 5 且小于等于 21 的奇数7
current-page当前页数,支持 .sync 修饰符number1
layout组件布局,子组件名用逗号分隔Stringsizes, 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是否禁用booleanfalse
hide-on-single-page只有一页时是否隐藏boolean-

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

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

设置点击事件

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

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

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

前往低代码交流专区

更多推荐