博客

这篇仅对于刚入行前端的小伙伴，大佬勿喷，技术比较菜，哪里写的不对也请指正

首先第一步当然少不了我们的分页组件

<el-pagination
 :current-page="page_options.page"
:page-size="page_options.page_size"
:total="page_options.total"
background
:pager-count="5"
 layout="prev, pager, next"
 @current-change="handleCurrentChange" />

先来介绍一下这几个参数的用法

官方文档也有更多的说明，有需要可以去官网自行查看

然后我们需要在data里面添加绑定值

page_options: {
        page: 1,
        page_size: 6,
        total: 0,
      },

1代表从第一页开始，6代表一页显示6条数据，total初始值先将他设置为0

下面我们开始使用

getRegister(page) { //这里的page用于接收翻页时调用传递的参数
      const params = {
        pageSize: this.page_options.page_size, //此处为后端分页要求的传参字段，根据实际情况改，并传入上面绑定的对应值
        page: page || 0, //此处就把括号内传递的值写在这里，没有的时候赋0
        patientIdHis: this.detail.brid, //接口需要请忽略
      };
      API.getRegister(params).then((res) => {
        this.register = res.data.data.content;//接口参数表格需要渲染的值根据实际情况编辑
        this.page_options.page = res.data.data.number + 1;//给page_options.page赋值，此处字段后端返回值告诉你一般默认值第一页会是0所以需要加1
        this.page_options.total = res.data.data.totalElements;//这里是后端返回的总条目数，初始值因为不知道有多少所以前面赋值为0，在接口返回后重新赋值即可，字段名根据实际接口字段填写即可
      });
    },

//下面这一段就是翻页需要用到的

handleCurrentChange(page) {
      this.getRegister(page - 1); //一定要按括号里面的方式进行写
    },

具体的用法都写在上面代码注释中了，有不明白的地方可以评论留言，哪里写的不对或者写错的地方也请指出，大家共同进步，后续我会再写一篇uniapp上拉加载的文章，有需要可以关注后续