上文 我们还是做了个比较重要的是 将我们的查询全部逻辑改为了分页查询
但是 目前 我们的删除和分页配合起来 它会有一点点问题
例如 这种情况 我们最后一页只有一条数据了
我们操作删除 将这条数据给他干掉
删除完之后 它会调分页查询 但我们当前页的条件还是之前的 例如 我们查第二页 但是 第二页本来就只有一条数据 已经被我们删了 那么 这自然就有问题了
最大的问题还是 因为 新的 total 数据总长度放回 我们分页的插件也自动去识别 表示它只有一页了 但是我们还是按第二页去查 这样 用户肯定看着一脸懵啊
这里 我们手动去加一条数据
然后 首先 我们要知道怎么能解决这个问题 他的问题无非是 当前页已经没数据了 但还在查这一页的内容。
那么 我们可以在删除成功后 还没有调查询的位置 判断 如果当前页没有数据了 就直接去查上一页的数据
找到我们项目App组件 中添加一个函数
PageCalculation(immunitYnumber) {
let pageBin = (this.page.pageCount * this.page.pageSize);
let minPage = this.page.pageSize - 1;
let total = this.total - immunitYnumber;
return (total < (pageBin - minPage))&&this.page.pageCount != 1;
},
这里 我们PageCalculation 接收一个行参 不参与计算的数据条数
然后 我们先 定义pageBin值为 当前页乘以总页数
例如 我们是一页十条 当前页为 第二页 那么 就是 2X10 = 20
大家可以多拿几种情况去计算 这个是可以多种情况适应的
然后 我们定义minPage值为每页展示数据条数减去1 例如 我们 每页展示是10条 那么这个值接回来的就是 9
最后 我们用total接受值 那总条数 减去不参与计算的immunitYnumber数量
最后 我们判断 如果 total 的值 小于 pageBin 减 minPage 这个条件
值会返回true 或 false 主要看成不成立 就比如 我们十一条 我们删除一条 传1调用PageCalculation
那么 pageBin 是 20 减去minPage 9 值就是 11
但是 我们传的1作为immunitYnumber不参与计算 所以 total 就是10
所以 total 是小于他们的 条件就成立了
当然 我们肯定要判断 this.page.pageCount != 1
因为 如果第一页 就没得退了
然后 我们找到App组件中的Indelete如下图
if(this.PageCalculation(1)) {
this.page.pageCount -= 1;
}
简单说 就是 当前页如果数据不够了 就往回调一页
改完之后 我们再模仿这个操作
删除第二页的最后一条数据
可以看到这一次 他就帮我们处理回上一页的位置啦
