前端分页方法

前端分页：

在el-pagination分页组件中，其内有参数

:page-size=“pagesize” 控制每页显示的条数

:current-page=“currentpage” 控制当前的页数

：total 总条数

需要编写的几个方法：

• @size-change="handleSizeChange"监听控件每页多少条显示，在此方法编写中，使pagesize等于传入的size，重新获取页面数据。this.getPageInfo();

• @current-change=“handleCurrentChange” 监听空间当前被点击到哪一页，使currentpage=传入的页码，重新获取页面数据。this.getPageInfo();

• this.getPageInfo()方法：在展示页面数据时，后端将全部数据返回后调用此方法。此中，对后端返回来的数据进行截取。将截取到的数据push至一个新集合，el-table绑定的是该新集合。

  截取方式为：for(let i=**(this.currentpage-1)*this.pagesize;i<this.total;**i++){

  if(this.pagefileList.length===this.pagesize) break;

  或即是*start=（this.currentpage-1)this.pagesize

  for(let i=start;i<start+pagesize;i++）

  以总条数23条，一个页面显示十条为例。

  第一页：1-1*10 其范围为0~23，当新数组长度为10后。结束循环。

  第二页 2-110 其范围为10~23 ，当新数组长度为10后，结束循环，以此类推。
  另外，分页后table页的index会每一页都是1-10排序，若要第二页按 10-20，则需自定义index方法，方法中对传入的index也是return currentpage-1pagesize+index即可

静态资源文件下载：

创建一个标签，然后设置其href属性为文件的URL地址，download属性为要下载的文件名。最后，通过调用click()方法触发链接的点击事件，实现文件的下载。如模板等放在静态资源static中可以，一般的服务器上的并不可以，服务器上的可以通过 ：click来调用后端接口，将要下载的地址参数等传入后端处理。

---

2024.7.25