正常开发过程中,假设我们向后端获取分页数据,传递的参数是:
<script>
data() {
return {
page: {
page: 1, // 当前页码
size: 2, //每一页显示的数据条数
total: 0 // 数据总数
}
}
}
</script>
当删除当前分页(当前分页是最后一页)最后一条数据后,页码this.page.page并没有改变,但是数据在后端删除了,也就是说当前得到的数据是一个空列表,所以如果删除后如果要出现数据,我们再次需要手动更改this.page.page的值,代码如下:
//执行删除操作
...
//删除成功后执行如下代码
// 修复删除后的bug
if (this.list.length === 1 && this.page.page > 1) {
this.page.page -= 1
}
//重新获取当前分页的数据
...
上述代码的意思是,执行删除操作,如果删除成功后,检测当前数组长度如果为1,并且当前页码大于1,则需要将页码减1,才能获得上一页的数据。