关于element-ui删除最后一页全部数据时显示无数据的bug

迷南。 2023-06-28 06:28 8阅读 0赞

**话不多说，先上图演示bug**

**删除前，我这里是总共6条数据，默认一页显示5条，这是第二页也即是最后一页**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]

删除后显示暂无数据，明明还有第一页的5条数据，这是为什么？？？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 1]  
**答案其实很简单，element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页，此时最后一页已经没有数据了，所以就显示暂无数据，需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据。**

**那么我们的解决办法就很清晰了，  
1.如果是删除最后一页的最后一条数据，则要跳转到第一页  
2.如果不是则继续显示在当前页中**

**在重新渲染数据之前加上这些操作，就可以实现了**

//记录总页数,
    //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
    const totalPage = Math.ceil((this.total - 1) / this.pagesize)
    
    //记录当前页码
    //记住删除最后一条数据时当前码是最后一页
    const pagenum = this.pagenum > totalPage ? totalPage : this.pagenum
    
    //实现跳转
    this.pagenum = pagenum < 1 ? 1 : pagenum
    // 重新渲染（后面方法改为你的方法名）
    this.queryUsersData()

**vue实例中的需要添加data**

// 当前页码
    	pagenum: 1,
    	// 页面显示条数
    	pagesize: 5
    	// 总页数
    	total: 0,

**分页组件**

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination>

**vue实例中methods**

// 改变每页显示条数
    handleSizeChange(newSize) { 
      this.pagesize = newSize
      // 重新发送请求
      this.queryUsersData()
    },
    
    // 通过jumper改变当前页码
    handleCurrentChange(newPage) { 
      this.pagenum = newPage
      // 重新发送请求
      this.queryUsersData()
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200108005416884.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200108005632321.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA==,size_16,color_FFFFFF,t_70