vue中分页删除最后一条数据,返回上一页

1,209 阅读1分钟

在测试页面的时候发现的bug,当删除最后一页的所有数据时,发现虽然下面当前页数是返回去了,但是数据却没有上去,因此在删除功能下写如下代码便可以返回上一页了。

const totalPage = Math.ceil((this.total - 1) / this.queryParams.pageSize) // 总页数
            this.queryParams.pageNum = this.queryParams.pageNum > totalPage ? totalPage : this.queryParams.pageNum
            this.queryParams.pageNum = this.queryParams.pageNum < 1 ? 1 : this.queryParams.pageNum

我老大更加直接,当删除一条数据时就直接返回到第一页了,然后再整体刷新一遍,如下

this.queryParams.pageNum = 1;
this.getList();

但是我觉得这种做法有点不妥,不太合适只删除一条数据的时候,不过我觉得适合批量删除

//当时的部分代码
data(){
    return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        currentPage: 1,
        total: 400,
    }
},
methods:{
      deleteList(id) {
        Api.deleteHandle(params).then(response => {
          if (response.code === 0) {
            this.getList()
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            const totalPage = Math.ceil((this.total - 1) / this.queryParams.pageSize) // 总页数
            this.queryParams.pageNum = this.queryParams.pageNum > totalPage ? totalPage : this.queryParams.pageNum
            this.queryParams.pageNum = this.queryParams.pageNum < 1 ? 1 : this.queryParams.pageNum
            //批量删除,直接回到第一页
            this.queryParams.pageNum = 1;
            this.getList();
          } else {
            this.$message({
              message: '警告哦,这是一条警告消息',
              type: 'warning'
            });
          }
        })
      }
},