element-plus+vue3+ts Pagination分页删除最后一条数据返回上一页问题

啦啦啦hh

已于 2024-01-04 21:01:37 修改

阅读量912

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端-学习之路文章标签： javascript 前端 vue.js

于 2022-10-18 09:41:27 首次发布

本文链接：https://blog.csdn.net/qq_44997940/article/details/127381798

web前端-学习之路专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在前端开发中，请求数据和加载函数的执行顺序对应用逻辑的影响。作者指出，确保load()函数在请求成功后再执行至关重要，以防止在删除数据并回退页面时出现错误。通过调整请求和回调的结构，可以避免因页面状态未及时更新导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一定记住对后端的请求是在加载函数之后的，我这里如果把load()放在外面会导致先执行load()再向后端请求post，即使你查到当前页值改变了，在向后端请求的时候也还是原来的页数，删除最后一条数据的时候就会报错。

  const handleDelet = (id) => { //删除
    request.post("/staffs/classify/" + currentPage.value + "/" + pageSize.value, aa).then(res =>{
      if(res.data.account==1){
        currentPage.value=currentPage.value-1;
      }
      currentPage.value = currentPage.value < 1 ? 1 : currentPage.value;
    })
    request.delete("/staffs/" + id).then(res => {
      load();//调用load要放在then里面，否则会先执行load函数
    })
    // load();//在这里调用会导致先执行load()再向后端请求post，删除最后一条数据返回上一页时就会出现当前页currentPage并没更新而报错
  }

  const load = () => { //获取并更新页面人员信息
    request.post("/staffs/classify/" + currentPage.value + "/" + pageSize.value, aa).then(res => {
      // console.log(currentPage.value);
      console.log(res);
      tableData.arr=res.data.data;
      total.value=res.data.allAccount;//需要后台返回的总条数
    })
  }