美文网首页
前端删除列表数据后页码重置逻辑

前端删除列表数据后页码重置逻辑

作者: 星星藏进黑夜 | 来源:发表于2024-03-26 08:37 被阅读0次

    问题描述

    需要调整页码的例子:
    列表一共有10页数据,用户把第10页数据全部删除后,需要把数据重置成上一页,也就是第9页

    多页情况

    不用调整页码的例子:
    列表一共有1页数据,用户把本页数据全部删除后,页码依然是第1页无需调整

    单页情况

    代码

    列表数据删除后,对当前页码进行修正,防止有数据时,因页码错误导致页面显示不出数据
    当前页current为最大页码时进行调整(并且排除掉第一页的情况)

      data(){
        return {
          tableData: [],//数据列表
          current: 1,//当前页码
          pageSize: 10,//每页条数
          total: 0,//总条数
        }
      },
      methods: {
        /** 获取列表数据 */
        getTableData(){ ... },
        /** 删除数据 */
        handleDel(){
          const ids = [1, 2, 3]//要删除数据的id(当前代码为demo所以是写死的id列表)
          const params = { ids }
          // 调用删除接口
          DelData(params).then((res)=>{
            if(res.code==200){
              //当前页码(current)大于一页,并且为最后一页时需要重置页码
              const maxCurrent = Math.ceil(this.total/this.pageSize)//最大页码
              if(
                  (ids.length == this.tableData.length) &&
                  (this.current > 1) && //排除第一页
                  (this.current == maxCurrent) //排除所有中间页
                ){
                this.current -= 1
              }
    
              // 页码修正后再获取列表数据
              this.getTableData()
            }
          })
        }
      }
    

    相关文章

      网友评论

          本文标题:前端删除列表数据后页码重置逻辑

          本文链接:https://www.haomeiwen.com/subject/uzqstjtx.html