elementui配合的前端分页

项目场景：

利用elementui中自带的分页组件来解决分页问题。

其实不太建议前端来做分页.

这里主要有几个原因不选用前端来做分页:

1. 如果前端一次性将后端返回的数据全部保存下来,虽然可以减少接口请求的次数。但是如果有成千上万条数据的话,前端会占用过多的带宽来做处理,导致前端页面的性能大幅度降低。
2. 现在的web开发开始向前后端分离趋势前进,前端关注于表现层和提高页面的性能。而后端注重于业务层,前端只需要做简单的请求,性能越快越好,后端只需要提供接口供前端使用就可以.

如果是后端做分页处理,那么前端还是会发多次请求。一个页码就对应了后端访问数据库的一次操作.

在这里我还是把前端分页处理的方法提一下, 下一帖再讲一下如何做后端处理。

问题描述：

这个是elementui官网的组件.
它自带了一个事件--------@current-change=“handleCurrentChange” 这个方法就是你点击页码的时候返回你相对应的页码。 由于我们选择的是前端来做分页,那么我们只会向后端取一次数据。那么这个页码又有什么用呢？

过程分析：

我们如果将从后端拿到的全部数据保存起来,然后每次切换页码的时候从保存的数据中拿不就好了…

当然,我们不可能每次都是拿全部的数据,要是同时有条件筛选的分页该怎么处理呢.

我们其实可以这样做:

• 第一次拿到全部数据之后，将拿到的数据保存起来。然后先做分页操作。做分页需要页面大小（pageSize）和（totalPage），我们就可以将全部数据根据页面大小分割成数组，数组中的元素为每页的数据。
• 因为现在数据已经被分隔成为包含每一页数据的数组，所以我们可以利用点击页码触发事件返回的页码，通过页码和数组下标的关系来获得页码对应页面的数据。
• 如果有条件的筛选分页怎么做呢 ？ 其实这个实现的方式和上面的差不多，。既然你有条件，那么就根据你的条件向后端发起一次请求，然后再保存在本地，再分割，这个分割数据的功能可以封装成方法，方便调用。
• 因为我们本地已经将分割的数据都保存了下来，那么你再点前一页或者点击某一页的数字的时候，你可以直接利用页码和数组下标的关系拿到对应页码的数据。
• 但是前提！！！！必须牺牲每次发起请求时对系统资源的大部分占用。

解决方案：

1. 封装一个函数，用于分割服务器返回的数据

dataFormat(arr, size = 1) {// arr是整个数据，size是pagesize，默认为1
      let index = 0;
      let res = [];
      while (index < arr.length) {
        res.push(arr.slice(index, index + size));
        index += size;
      }
      return res;
    }

1. 通过上面的函数，我们可以将服务器返回的数据分割成二维数组。一维数组的元素就是每一页的数据。
2. 在点击页码的时候，会触发handleCurrentChange(val) 事件，这个事件的返回值是页码，我们需要通过页码去访问一维数组的元素。在elementui分页组件中，有个属性叫currentPage，表示当前高亮显示的页码。
3. 我们拿到想要请求的页码后，将当前页设置为点击的页码数，然后通过当前页码-1去一维数组中拿取渲染到该页的数据。

handleCurrentChange(val) {
      // console.log(val);
      this.currentpage = val;
      this.tableData = this.formatdate[val - 1];
    },

1. 分页组件还有个属性是totalPage，这个是我们在拿到数据的第一时间就需要改变的。
2. 也就是说----你现在的总页数 = 服务器返回的总条数 / pageSize

this.total_page = response.data.length;//设置总页数
this.formatdate = this.dataFormat(response.data, this.pageSize);//渲染到页面上的数据，先经过分割函数的处理。

以上就是我对这次前端分页的全部处理了~~~~~~~~~~~~
下次会分享后端做分页的经验帖。

有疑问的欢迎大家留言！！！欢迎讨论