基于element-plus，Vue3分页功能制作

最新推荐文章于 2024-01-31 16:46:07 发布

原创最新推荐文章于 2024-01-31 16:46:07 发布 · 669 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了如何在前端实现分页功能。通过使用JavaScript，利用数据切片方法动态地展示每一页的数据，并计算总页数。关键步骤包括获取接口数据，设置页码和每页显示数量，以及根据这些参数更新页面显示。此方法适用于前端数据展示和用户交互，提升用户体验。

分页功能制作

首先需要吧分页的数据进行切割，这边有一个固定的公式如下图

const getData = () => {
//存放数据的变量    //接口的数据     //页码                  //每页显示的数量
tableData.value = res.data.slice((query.pageIndex - 1) * query.pageSize, query.pageIndex *query.pageSize);

pageTotal.value = res.data.length; //总页数
//页码减1 乘以每页的数量 0*5
//页码乘以每页的数量，1*5
}