Vue组件库Element-ui 删除表格最后一页 的最后一条数据时,重新获取数据,不会刷新页面的BUG
本人小白自学前端中,在一个element-ui项目中,遇到这样的一个bug 。 在删除了第七页的最后一条数据之后,重新获取了列表数据,但是不显示数据,需要刷新之后才会显示。如图:
百度之后,说是虽然数据删除了但是还是在当前页面。 so 本着没事多敲敲代码的想法 验证了下
如下图:
*看到了结果之后,顿时感叹自己还是太弱了, 然后看了下前辈们提供的方法, 瓦特? 要定义这么多变量? 我 就比较懒不想定义辣么多变量,只能自己想办法,人体CPU冒烟中~~~~~ 最后时间太晚了就去洗了个澡,给我人体CPU 降降温。最后有了解决方案,和前辈们一样,跳转到上一页。但是我这个就不定义变量了,直接用项目中现成的变量~~开心ing*
解决方案以及思路
**思路:
首先我们怎么才能之后当前页面被删除的是最后一条数据,然后怎么跳转到上一页**
**我们可以看到 log 输出 之后 当前页 以及数据总数应该是要 减一才对,因为我们删除了一条数据呀!
so 那我们判断 当前总数据减一 余上 **当前页面显示数据条数 ****
结果是否等于 0 就可以判断 当前是否是最后一页了。
知道是最后一页之后,我们 当前是第几页 减一 就可以跳转到上一页了,关键不用新定义变量,用我们使用分页组件时 创建的数据就可以了
**
代码如下:
// 当前页
this.queryInfo.pagenum
// 当前每页显示数据条数
this.queryInfo.pagesize
// 数据总数
this.total
// 第一种方法三元表达式 解决删除最后一条数据页面显示 无数据BUG
// 大概意思就是当前页的页数大于1并且数据总数除以每页显示的数据条数等于0吗? 满足这两个条件,
// 我们直接通过 Vue 的数