持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情
上一篇文章中我们把获取到的用户数据渲染到页面上，接下来将实现一个分页器的功能，具体的样式如下图所示：
有到第几页，总条数，一页展示多少条以及跳转到多少页这些功能。
- 首先我们进入element-plus官网，找到Pagination 分页这个组件，然后我们选择功能最多的一个，如下图所示：
- 将这个组件的代码复制粘贴到我们的表格组件下面，然后我们需要配置一些属性来完成分页器的功能，首先我们数据的接口需要配置total,pageSize,currentPagem这些数据，然后我们需要定义一个config来接收这些数据，代码如下所示：
const config = reactive({
total: "",
pageSize: "",
currentPage: "",
});
const getUserData = async () => {
await request.get("/user/getUserData").then((res) => {
config.total = res.data.total;
config.pageSize = res.data.pageSize;
config.currentPage = res.data.currentPage;
userData.value = res.data.data;
});
};
- 接收到的这些参数我们需要配置到分页器中，分页器组件中需要绑定两个事件，一个是size-change,一个是current-change，用来当页面数发生改变的时候切换下面的数据并且展示出来，然后分页器绑定的total等属性都是需要从config当中获取到的属性，代码如下图所示：
- 这两个事件也要在setup中进行定义，首先是handleCurrentChange，监听页面的变化，有一个val值可以传递进来，然后让这个val赋值给config.currentPage,还一个是handleSizeChange，同样也有val值，把val值赋值给config.pageSize,然后里面有一个config.currentPage值，代表页面初始值，当然是1；
