添加数据-做添加-页面跳转不正确

295 阅读1分钟

目标

添加完成之后,能立刻看到这条数据

原因

后端添加的数据在最后,而查询的页面不是最后一页

解决

添加完成之后,跳到最后一页去

  • 最后一页是满的,最后一页要+1

补充计算属性

computed: {
    // 表格中最大的页码
    maxNum() {
      return Math.ceil(this.total / this.pageParams.pageSize)
    },
    // 最后一页是不是满的
    isLastPageFulled: function() {
      return this.total % this.pageParams.pageSize === 0
    }
  },

请求成功关闭弹窗后修改doAdd()后重新渲染

async doAdd() {
  try {
    // 1. 调用接口
    const res = await addRole(this.form)
    // 2. 关闭弹层
    this.showDialog = false
    
    // if(表格的最后一页是满) {
    //   想查看最新添加的数据,要跳到最大页码的下一页
    //  }
    if (this.isLastPageFulled) {
      this.pageParams.page = this.maxNum + 1
      this.total++
    } else {
      // 想查看最新添加的数据,要跳到最大页码
      this.pageParams.page = this.maxNum
    }
    
    // 3. 重发请求
    this.loadRoles()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}