Vue第30篇，前端分页技术解析：Vue + Element UI 实现高效数据展示（vue前端分页，el分页，el-pagination分页，Element分页）

前言

在现代Web应用中，数据量庞大，一次性加载所有数据，不仅会增加页面加载时间，还会消耗过多的网络资源和客户端内存。因此，分页技术成为了优化用户体验和提高性能的关键手段之一。而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理数据，做前端分页。这里详细介绍下如何使用 VueJS 结合Element UI的分页组件实现前端分页，并通过一个具体的例子来展示其实现过程。

---

一、前端分页具体实现过程

1. 首先，我们来看一段使用VueJS和Element UI实现前端分页的HTML代码示例：

<!-- 搜索分页 -->
<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>



<!-- 分页注释 -->
@size-change="handleSizeChange"                     // 页面大小变化时的处理方法
@current-change="handleCurrentChange"               // 当前页变化时的处理方法
:page-sizes="[10, 20, 30, 40, 50]"                  // 可选择的每页显示数量
layout="total, sizes, prev, pager, next, jumper"    // 分页组件布局
:current-page="currentPage"                         // 当前页
:page-size="pageSize"                               // 每页显示数量
:total="total"                                      // 总数据量

2. 在Vue组件的数据属性中，我们定义了以下变量：

// 分页参数
total: 0, // 总记录数
pageSize: 6, // 每页显示的记录数
currentPage: 1, // 当前页码
searchList: [], // 存储所有查询结果的数组
padingList: [], // 根据当前页码和每页记录数计算出的待展示数据

3. 接下来，我们看下choseSearch函数，它是处理数据请求和分页的核心：

// 点击搜索
choseSearch() {
  searchTitle(this.searchCon).then((res) => {
    // 将服务器返回的数据存储在searchList中
    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
    );

  });
},},

4. 最后，我们来看看分页事件处理器：

// 分页函数
handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  this.pageSize = val; // 更新每页显示记录数
  this.choseSearch(); // 重新加载数据
}

handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  this.currentPage = val; // 更新当前页码
  this.choseSearch(); // 重新加载数据
}

---

二、分页原理详解

1. 数据获取： 当用户执行搜索操作时，choseSearch函数被调用。该函数向服务器发送请求，获取数据并存储在searchList中，同时更新total记录总数。

2. 分页计算： 在choseSearch函数中，通过slice方法对searchList进行切片操作，根据当前页码currentPage和每页记录数pageSize计算出padingList，即当前页需要展示的数据。

3. 事件监听： 使用Element UI的<el-pagination>组件，通过@size-change和@current-change事件监听器，当用户更改每页显示记录数或切换页面时，分别调用handleSizeChange和handleCurrentChange函数。这两个函数都会更新相应的状态，并再次调用choseSearch函数，重新计算padingList。

---

三、可以看下图例

1. 分页标签与属性

2. 定义相关数据属性

3. 请求接口后返回总数据，然后对数据进行筛选处理 ，计算筛选后，循环展示padingLsit，就可以了（关键一步）

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

---

四. 完整代码

<!-- 搜索分页 -->
<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();
},