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

问题描述

需要调整页码的例子:
列表一共有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()
        }
      })
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/487876.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【考研数学二】线性代数重点笔记

目录 第一章 行列式 1.1 行列式的几何意义 1.2 什么是线性相关,线性无关 1.3 行列式几何意义 1.4 行列式求和 1.5 行列式其他性质 1.6 余子式 1.7 对角线行列式 1.8 分块行列式 1.9 范德蒙德行列式 1.10 爪形行列式的计算 第二章 矩阵 2.1 初识矩阵 2…

Git基础(24):分支回退

文章目录 前言放弃已修改的内容分支回退到指定commit 前言 将分支回退到之前的某个版本 开发中,可能开发某个功能不需要了,或者想要回退到之前历史的某个commit, 放弃后来修改的内容。 放弃已修改的内容 如果未提交,直接使用 …

申请GeoTrust数字证书

GeoTrust介绍: 大家应该都不陌生,作为最老资格的一批国际大牌证书,GeoTrust的品牌效益和使用群体非常庞大。在数字证书领域也是当之无愧的龙头地位,作为Symantec和Digicert的子品牌,证书安全性能方面毋庸置疑&#xf…

Android内存优化项目经验分享 兼顾效率与性能

背景 项目上线一段时间后,回顾重要页面 保证更好用户体验及生产效率,做了内存优化和下载导出优化,具体效果如最后的一节的表格所示。 下面针对拍摄流程的两个页面 预览页 导出页优化实例进行介绍: 一.拍摄前预览页面优化 预览效果问题 存在…

TrackballControls是Three.js中的一个相机控件,它允许用户通过鼠标拖拽、滚轮缩放以及键盘移动相机,实现类似于球形的相机旋转操作。

demo案例 TrackballControls是Three.js中的一个相机控件,它允许用户通过鼠标拖拽、滚轮缩放以及键盘移动相机,实现类似于球形的相机旋转操作。这个控件可以用于3D场景中,以提供更好的用户体验。以下是对TrackballControls的入参、出参、方法…

由浅到深认识Java语言(25):正则表达式

该文章Github地址:https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.c…

基于nodejs+vue高校自习室预约系统的设计与实现python-flask-django-php

本系统在设计过程中,很好地发挥了该开发方式的优势,让实现代码有了良好的可读性,而且使代码的更新和维护更加的方便,操作简单,对以后的维护减少了很多麻烦。系统的顺利开发和实现,对于高校自习室预约这一方…

springboot项目学习-瑞吉外卖(4)

1.任务 这一节主要的任务是解决文件的上传和下载功能 2.文件上传 概念:将本地的图片上传到浏览器上面 点击文件上传,前端就会发送如上的请求,服务端应该根据URL和请求方法来处理请求 CommonController类: RestController Slf4j …

xcode生成静态库.a

一、生成静态库 1.打开 Xcode 创建一个新的 Static Library 工程,取名applestudio 2.创建工程完毕后,简化目录结构 删除系统自动创建的同名类:applestudio.h和applestudio.m 把自己的代码复制进去,如例子:guiconnect.h…

java Web餐馆订单管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 餐馆订单管理系统是一套完善的web设计系统,对理解JSP java 编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发,数据库为Mysql5.0,使…

Elasticsearch从入门到精通-07ES底层原理学习

Elasticsearch从入门到精通-07ES底层原理和高级功能 👏作者简介:大家好,我是程序员行走的鱼 📖 本篇主要介绍和大家一块学习一下ES底层原理包括集群原理、路由原理、分配控制、分配原理、文档分析原理、文档并发安全原理以及一些高…

交换机高级-端口安全

端口安全 1、一旦接口开启端口安全功能,那么接口所学到的动态MAC就会转换成安全MAC地址; 2、安全MAC地址默认情况下只能学习1个,可以通过命令手动修改学习数量; 3、安全MAC地址没有老化时间(但是依然存在内存中&…

iOS-UIFont 实现三方字体的下载和使用

UIFont 系列传送门 第一弹加载本地字体:iOS UIFont-新增第三方字体 第二弹加载线上字体:iOS-UIFont 实现三方字体的下载和使用 前言 在上一章我们完成啦如何加载使用本地的字体。如果我们有很多的字体可供用户选择,我们当然可以全部使用本地字体加载方式,可是这样就增加了…

荟萃分析R Meta-Analyses 3 Effect Sizes

总结 效应量是荟萃分析的基石。为了进行荟萃分析,我们至少需要估计效应大小及其标准误差。 效应大小的标准误差代表研究对效应估计的精确程度。荟萃分析以更高的精度和更高的权重给出效应量,因为它们可以更好地估计真实效应。 我们可以在荟萃分析中使用…

容器镜像加速指南:探索 Kubernetes 缓存最佳实践

介绍 将容器化应用程序部署到 Kubernetes 集群时,由于从 registry 中提取必要的容器镜像需要时间,因此可能会出现延迟。在应用程序需要横向扩展或处理高速实时数据的情况下,这种延迟尤其容易造成问题。幸运的是,有几种工具和策略…

360奇酷刷机 360刷机助手 QGDP360手机QGDP刷机

360奇酷刷机 360刷机助手 QGDP破解版360手机QGDP刷机 360手机刷机资源下载链接:360rom.github.io 参考:360手机-360刷机360刷机包twrp、root 360奇酷刷机:360高通驱动安装 360手机刷机驱动;手机内置,可通过USB文件传输…

同城上门按摩服务平台,同城上门小程序搭建有具备哪些功能?

上门服务小程序系统通常包含以下功能: 1.用户注册和登录:用户可以在小程序中注册账号并登录,方便后续的预约和服务操作。 2.服务分类和展示:提供各种上门服务的分类,例如家政服务、保洁服务、维…

ChatGPT助力论文写作:详细步骤解析

前言 在论文写作过程中,尽管人工智能工具如ChatGPT能为我们提供有效的辅助,但我们必须铭记,这些工具并不能完全取代我们的思考与判断能力。本指南将详尽地展示如何利用ChatGPT辅助论文写作的全过程,旨在帮助您更高效地完成学术任…

JavaEE企业开发新技术3

目录 2.11 Method的基本操作-1 文字性概念描述 代码: 2.12 Method的基本操作-2 2.13 Method的基本操作-3 2.14 数组的反射操作-1 文字性概念: 代码: 2.15 数组的反射操作-2 学习内容 2.11 Method的基本操作-1 文字性概念描述 Me…

.NET分布式Orleans - 2 - Grain的通信原理与定义

Grain 是 Orleans 框架中的基本单元,代表了应用程序中的一个实体或者一个计算单元。 每个Silo都是一个独立的进程,Silo负责加载、管理和执行Grain实例,并处理来自客户端的请求以及与其他Silo之间的通信。 通信原理 在相同的Silo中&#xff0…