前端分页（vue前端分页，el分页，el-pagination分页，饿了吗分页）

缺乏、安全感 2023-10-04 21:52 78阅读 0赞

#### 简述：作为一名前端开发者，分页功能我们经常会用到，但有时候后端会把数据一次性给我们，需要我们自己处理数据，做前端分页，下面给大家介绍如何实现，其实很简单，就是使用数组的slice方法，进行截取计算； ####

#### 1、分页标签，属性； ####

![3dd18cf963ef4ef2ab47e40c6cbbd474.png][]

#### **2、定义相关数据；** ####

![0b58534c5c524c7082eae65602208b19.png][]

#### 3、请求接口后返回总数据，然后对数据进行筛选处理 ，计算筛选后，循环展示padingLsit，就可以了； ####

![dc6a76bff48546399c92c4dabcf66f10.png][]

#### 4、分页相关功能，点击分页时，赋值，调用相关接收数据方法，重新渲染； ####

![12843c3f674f423b9d44a1316db4fcfb.png][]

#### 完整代码>> ####

<el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
              :page-size="pageSize"
              :page-sizes="[6, 12, 18, 24]"
              :current-page="currentPage"
              :total="total"
            >
            </el-pagination>
    
        // 分页参数
          total: 0,//总数
          pageSize: 6, //每页多少条数据
          currentPage: 1, //当前页
          searchList: [],//用来接收总数据
          padingList: [], //计算后需要展示的页面数据
    
        // 点击搜索
        choseSearch() {
          searchTitle(this.searchCon).then((res) => {
            // console.log(res);
            const data = res.rows;
            this.total = res.total;
            this.searchList = data;
            // 前端分页，关键一步；
            this.padingList = this.searchList.slice(
              (this.currentPage - 1) * this.pageSize,
              this.currentPage * this.pageSize
            );
          });
        },
    
        // 分页函数
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.choseSearch();
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.choseSearch();
        },

感觉有用，就一键三连，感谢(●'◡'●)

[3dd18cf963ef4ef2ab47e40c6cbbd474.png]: https://img-blog.csdnimg.cn/3dd18cf963ef4ef2ab47e40c6cbbd474.png
[0b58534c5c524c7082eae65602208b19.png]: https://img-blog.csdnimg.cn/0b58534c5c524c7082eae65602208b19.png
[dc6a76bff48546399c92c4dabcf66f10.png]: https://img-blog.csdnimg.cn/dc6a76bff48546399c92c4dabcf66f10.png
[12843c3f674f423b9d44a1316db4fcfb.png]: https://img-blog.csdnimg.cn/12843c3f674f423b9d44a1316db4fcfb.png