[通识][前端][element-ui] 分页器使用的注意事项

前言

好久没有写过分页器了, 现在使用到分页器突然忘记了很多细节. 故整理成博客, 后续开发的时候当做checklist来对照, 防止大意而被测试提单.

我使用的是element-ui框架中的完整功能分页器

概述

完整功能分页器, 可以结构成几个不同的部件.

部件名称	对应 Attributes	对应 Events	备注
总条数	total	-
当前页码	current-page	current-change
页容量	page-sizes	size-change	一页显示多少条数据

如果配合使用的table组件里面有 删除 list的功能, 则还需注意删除时候的逻辑.

功能实现细则

1. 总条数

   总条数为后端返回的数据中会有的, 这个无需注意的地方.

2. 当前页码

   当前页码点击的时候, 会触发一个点击事件. 可以捕获到当前点击的页码数. 然后发请求获取对应页码的数据.

3. 页容量

   注意: 页容量改变的时候, 一定要将当前页码current-page初始化为1, 否则很可能导致bug.

4. 删除table中的list

   删除某一条数据, 一般是直接删除数据的api发请求. 然后在请求一下当前页码table数据的api发请求获取数据. 但是这里有一个细节需要注意.

   注意: 当删除的是最后一页的最后一条数据的时候, 这里分两种情况考虑.
   1 ) 整个table只有一条数据. 所以 第一页就是最后一页, 第一条数据也是最后一条. 直接发送删除请求然后在获取一下table数据就好, 当然你一定得到的是空的table数据;
   2 ) table的最后一页不是第一页. 则删除最后一条数据的时候, 在请求table数据刷新页面的时候, payload中的currentPage一定要是当前页码数减一.
   EX: 现在一共有21条数据, 每页显示10条. 那么这21条数据就会分3页显示, 第三页只有一条数据, 就是第21条, 也是最后一条. 当删除第21条数据的时候, 如果你请求的currentPage还是3的时候, 那么你将看到分页器的页码在3而页面显示空白. 出现这种情况就是, 后台取不到第三页的数据了, 所以返回空对象, 但是前端的currentPage这个值还没变. 正确的做法应该是先将currentPage的值减去1, 然后在发请求获取数据刷新页面. 也就是, 此时请求的应该是第2页的数据.