删除页面最后一条数据时，分页组件current没有减一，传入后端page也没减一导致查询页面列表为空

Question

老师怎么解决这个问题的？

Answer 1

甲蛙 2021-04-23 15:02:37

删除后， 我们是刷新当前页，可以改成从第1页开始查。

还有一种，在删除之前，判断，如果list.length=1，只有一条数据，那么刷新时，current-1

• 提问者 geniusmorn #1

  非常感谢！我修改后的代码在下面，请老师同学指正。

Answer 2

weixin_慕仙5029974 2022-08-06 00:18:18

/**
 *  删除
 */
const handleDelete = (id: number) => {
    axios.delete("/ebook/delete/" + id).then((response) => {
        const data = response.data; // data = commonResp
        if (data.success) {
            // 判断删除后当前页面是否还有数据
            if (ebooks.value.length === 1){
                pagination.value.current--;
            }
            // 重新加载列表
            handleQuery({
                page: pagination.value.current,
                size: pagination.value.pageSize,
            });
        }
    });
};

Answer 3

weixin_慕仙5029974 2022-08-05 22:18:32

/**
 *  删除
 */
const handleDelete = (id: number) => {
    axios.delete("/ebook/delete/" + id).then((response) => {
        const data = response.data; // data = commonResp
        if (data.success) {
            // 判断删除后当前页面是否还有数据
            if (data.content == null){
                pagination.value.current--;
            }
            // 重新加载列表
            handleQuery({
                page: pagination.value.current,
                size: pagination.value.pageSize,
            });
        }
    });
};

• weixin_慕仙5029974 #1

  这个是错的、、、

Answer 4

提问者 geniusmorn 2021-04-25 16:43:02

// 删除
      const del = (id : number) => {
        // 定义公共变量
        let listLength = -1;
        // 删除前先去查当前页还有几条数据
        let myPromise = new Promise((resolve => {
          axios.get("/album/list", {
            params: {
              page: pagination.value.current,
              size: pagination.value.pageSize
            }
          }).then((response) => {
            const data = response.data;
            if(data.success){
              listLength = data.content.list.length;
              resolve("list已执行"); //successMessage
            }
          });
        }))
        // 如果拿到查询数据，再去删除，否则listLength还是-1
        myPromise.then((successMessage) =>{
          axios.delete("/album/delete/" + id).then(response => {
            if (response.data.success){
              console.log("list已执行", successMessage);
              console.log(listLength);
              // 删除成功后重置page, 再去刷新列表
              const current = pagination.value.current;
              const page = (listLength == 1) ? current - 1  : current;
              // 刷新列表
              handleQuery({
                page: page,
                size: pagination.value.pageSize
              });
            }
          })
        })
      };

我按照老师的思路，把删除函数修改了一下，用到了promise，可以解决这个BUG

如果有同学有更好更简洁的解决方案也欢迎指正和分享。

• 提问者 geniusmorn #1

  因为我发现axios并不会从上到下执行......和setTimeout一样是异步操作。上网查了下：Axios 是一种异步请求技术,在页面中发送异步请求,获取对应数据后在页面中渲染,基于Ajax的封装。

• 慕粉0025000142 回复 提问者 geniusmorn #2

  我不会写前端，只能从后端判断hhh

• 三祺 #3

  你这个解法太麻烦了