el-pagination在删除非第一页的最后一条数据遇到的问题

news2024/12/23 18:59:06

文章目录

  • 前言
  • 一、问题展示
  • 二、解决方案
  • 三、源码解析
    • 1、elementui
    • 2、elementplus
  • 总结


前言

这个问题是element-ui中的问题,可以从源码中看出来,虽然页码更新了,active也是对的,但是未调用current-change的方法,这里就不是很合理。我先是在网上找的答案,然后改好之后去看的源码。因为大都是只说怎么改的,没有解析源码,我就记录一下;本来寻思这个问题我得去参与一下elementui的建设,给一无是处的工作添上一笔浓墨,谁知道elementui自2023年八月之后就不维护了,我又去看了elementplus,这个bug已经改好了。哎,发现的太晚了,太影响我赚钱了


一、问题展示

在这里插入图片描述
这个图能看出来表格有三条数据,但是页面却没有数据,这是因为currentPage还是为2,已经没有第二页的数据了,接口自然返回为空数组,所以就暂无数据了

二、解决方案

这是我在网上看到的(PS:忘记留地址了,十分抱歉),我改造了一下,所以不是很一样

// pageNum是外部传给组件的,currentPage是给组件的用于赋值。下面的源码解析也是用的这两个
totalSize(val) {
      const totalPage = Math.ceil(val / this.pageSize);
      // 从上面的问题中也能看出来,总条数变了,会触发这个方法,只有在pageNum比totalPage大的时候执行。
      // 就应该1页,但是pageNum为2,这就是没更新,需要手动更新一下
      if (this.pageNum > totalPage) {
        this.currentPage = totalPage < 1 ? 1 : totalPage;
        // 这是用来触发查询方法的
        this.handleSearch();
      }
    }

三、源码解析

1、elementui

在这里插入图片描述
这里我必须说个小技巧哦。图上的pager是elementui封装的组件,在packages文件夹中,它跟elementui.common.js中的js方法是一样的。我要说的是如果elementui是你直接从node_modules中拉出来的,那么你在elementui.common.js中修改js,console.log就可以直接在项目运行的时候看了,超级无敌方便,就是要小心一下,不然会打包上去。

// 这个放在这里其实我是想说在这里写currentPage的监听也是可以的
watch: {
    showPrevMore: function showPrevMore(val) {
    },
    showNextMore: function showNextMore(val) {
    },
    // 也可以在这里加个currentPage的监听,当然最重要的也是emit。
    // 毕竟watch和computed在某些方面异曲同工。这个跟computed二选一即可
    currentPage: function currentPage(val) {
    	this.$emit('change', val);
    },
  },

  methods: {
  // 这个方法是点击页码会执行的
    onPagerClick: function onPagerClick(event) {
      if (newPage !== currentPage) {
      // 这个地方留着就是因为这里的emit是更新pageNum的方法。
      // 意思就是currentPage变了,没执行这句话,pageNum不会更新的
        this.$emit('change', newPage);
      }
    },
    onMouseenter: function onMouseenter(direction) {
    }
  },

  computed: {
  // 这个方法就是为啥页码变色会很正常,这就是因为pagers是页码数组,就是for循环的它来进行页码渲染的。
  // 我也就是看到变色了,在这个地方打印了一下currentPage发现它改变了,但是并未更新pageNum,也未调用handleCurrentChange
  // 这也就是为啥,页码变色了,也变为1了,但是拿到的pageNum依旧是2,就是这里没有emit
    pagers: function pagers() {
      var pagerCount = this.pagerCount;
      var halfPagerCount = (pagerCount - 1) / 2;

      var currentPage = Number(this.currentPage);
      var pageCount = Number(this.pageCount);

      var showPrevMore = false;
      var showNextMore = false;

      // 中间省略了处理的步骤
      
      this.showPrevMore = showPrevMore;
      this.showNextMore = showNextMore;
	
	// 我是在这里加了这句话,页面就好了。就是更新一下pageNum。这个跟watch二选一即可
	this.$emit('change', currentPage);
      return array;
    }
  },

2、elementplus

// 这个就是监听了currentPage,也在下面的watch中调用了emit。就单纯看代码,elementplus比elementui写的细心的多,就什么都监听了。这就是有经验了吧
const currentPageBridge = computed<number>({
      get() {
        return isAbsent(props.currentPage)
          ? innerCurrentPage.value
          : props.currentPage
      },
      set(v) {
        let newCurrentPage = v
        if (v < 1) {
          newCurrentPage = 1
        } else if (v > pageCountBridge.value) {
          newCurrentPage = pageCountBridge.value
        }
        if (isAbsent(props.currentPage)) {
          innerCurrentPage.value = newCurrentPage
        }
        if (hasCurrentPageListener) {
          emit('update:current-page', newCurrentPage)
          emit('current-change', newCurrentPage)
        }
      },
    })

    watch(pageCountBridge, (val) => {
      if (currentPageBridge.value > val) currentPageBridge.value = val
    })

    watch(
      [currentPageBridge, pageSizeBridge],
      (value) => {
        emit('change', ...value)
      },
      { flush: 'post' }
    )

总结

看源码要趁早,毕竟万一写的不错,那可是很优秀的简历呀。反正我是没指望了,就记录一下吧

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

tinymce富文本编辑器使用

安卓富文本编辑器&#xff1a;npm i tinymce/tinymce-vue 当前项目中富文本是放在一个dialog中&#xff0c;因此部分样式会有层叠问题&#xff0c;该组件样式部分不添加scope。这里图片上传只是前端静态数据展示收集。 <template><div class"desc-editor"…

【算法工程师】(三年面试五年模拟版)总结

写在前面&#xff1a; WeThinkIn &#xff08;公主号&#xff09; 学习经验分享 目录 1、机器学习基础 2、深度学习基础 2.1 1*1卷积的作用 注&#xff1a;卷积核的个数对应输出的通道数&#xff08;channels&#xff09;&#xff0c;比如输入6*6*64&#xff0c;卷积核1…

C语言数据结构堆排序、向上调整和向下调整的时间复杂度的计算、TopK问题等的介绍

文章目录 前言一、堆排序1. 排升序&#xff08;1&#xff09;. 建堆&#xff08;2&#xff09;. 排序 2. 拍降序&#xff08;1&#xff09;. 建堆&#xff08;2&#xff09;. 排序 二、建堆时间复杂度的计算1. 向上调整时间复杂度2. 向下调整时间复杂度 三、TopK问题总结 前言 …

【数据结构与算法 | 链表篇】力扣876

1. 力扣876 : 链表的中间节点 (1). 题 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表…

Springboot 实战运用

一&#xff0c;基本配置 1&#xff0c;pom文件配置介绍 1.1继承 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.2</version><relativePath/> <…

架构(十七)翻译监控

一、引言 作者最近做的一个功能是需要监控一个翻译转换&#xff0c;根据国家和语言进行分组&#xff0c;然后定时把监控情况放到ck里面。为什么是分组和定时监控呢&#xff1f;因为调用比较高的系统的qps在单机一万多&#xff0c;70台机器&#xff0c;可怕的高频调用注定他不能…

基于51单片机的室内空气质量检测-仿真设计

本设计是基于单片机的空气质量检测设计&#xff0c;主要实现以下功能&#xff1a; 可实现通过SGP30测量二氧化碳及甲醛浓度&#xff0c;当超过设置的最大值时&#xff0c;进行报警及通风和净化空气处理 可实现通过MQ-4测量甲烷浓度&#xff0c;当超过设置的最大值时&#xff0…

PIC单片机控制小型三相无刷直流电机

1、使用PIC12F629小型三相无刷直流电机制作电动口罩&#xff0c;涉及到电机的驱动芯片的选型&#xff0c;这里选用国产的MS39549驱动芯片&#xff1b; 2、搭建的电路图如下&#xff1a; 3、单片机给MS39549驱动芯片发送PWM占空比信号&#xff0c;即可实现对电机的转速控制&…

webpack快速入门---webpack的安装和基本使用

webpack是什么 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 bund…

How Diffusion Models Work

introduction intuition goal 让神经网络学到图像是什么样的&#xff0c;一种方式是对数据添加不同级别的噪音&#xff0c;让神经网络能够区分细节/总体轮廓 训练一个神经网络去产生精灵 sampling nn

最新淘宝死店全自动采集私信筛选脚本,号称日赚500+【采集软件+使用教程】

原理&#xff1a; 利用脚本自动采集长时间未登录店铺&#xff0c;然后脚本自动私信对应的店铺&#xff0c;看看商家是不是不回消息来判断是否是死店&#xff0c;再下单购买死店的产品&#xff0c;超过48小时不发货就可以联系客服获得赔付&#xff0c;一单利润百分之5%-30%&…

ubuntu系统开启ssh密码登录

文章目录 前言 一、确认否有ssh服务 二、修改/etc/ssh/sshd_config配置文件 三、重启ssh服务 总结 前言 安装好ubuntu系统后&#xff0c;默认是无法通过密码远程shell连接的&#xff0c;需要修改配置文件。 一、确认否有ssh服务 我这边使用的是ubuntu 22.04 LTS的系统&a…

SpringBoot——集成Spring Data JPA保存数据

目录 JPA 项目总结 新建一个SpringBoot项目 pom.xml application.properties配置文件 User实体类 UserRepository接口 SpringbootJpaApplicationTests测试类 测试 JPA 项目在运行过程中会产生很多业务数据&#xff0c;一般我们把数据保存起来的这个过程称为数据持久化。…

应用层协议HTTP与HTTPS

HTTP与HTTPS的介绍 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;和HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff0c;超文本传输安全协议&#xff09;都是用于在Web上传输数据的协议&#xff0c;但它们之间存在一些重要…

筛选的艺术:数组元素的精确提取

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、筛选的基本概念 二、筛选的实际应用案例 1. 筛选能被三整除的元素 2. 筛选小于特定值…

Python系列:教你使用PyMySQL操作MySQL数据库

Python系列 PyMySQL操作MySQL数据库 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_2855…

Go语言GoFly框架快速新增接口/上手写代码

拿到一个新框架大家可能无从下手&#xff0c;因为你对框架设计思路、结构不了解&#xff0c;从而产生恐惧&#xff0c;所以我们框架是通过简单可视化界面安装&#xff0c;安装后即可看到效果&#xff0c;然后点击先点点看各个功能&#xff0c;看现有的功能是怎么写的&#xff0…

《QT实用小工具·六十八》基于QMenu开发的炫酷菜单栏

1、概述 源码放在文章末尾 该项目基于QMenu实现了炫酷的菜单栏效果&#xff0c;包含了如下功能&#xff1a; 1、实现了类似word菜单栏的效果&#xff0c;可以在菜单栏中横向添加不同的菜单 2、鼠标点击菜单可以展开菜单栏&#xff0c;再次点击菜单可以收起菜单栏 3、鼠标点击笑…

基础—SQL—DQL(数据查询语言)基础查询

一、引言 1、介绍&#xff1a; 分类全称描述DQL英文全称&#xff1a;Data Query Language(数据查询语言)主要是学习对数据库表中的记录进行查询的语句 2、讲解 日常的开发中或者对于一个正常的业务系统中&#xff0c;对于查询的操作次数是远远多于数据的增删改的频次。例如…

SFOS2:组件介绍

一、前言 在sailfish os application的开发过程中&#xff0c;几乎是困难重重&#xff0c;因为我暂未找到具有完整性、指导性、易懂性的开发文档&#xff0c;特别是组件的使用&#xff0c;现决定将自己的探究结果记录下来。因此&#xff0c;这篇文章只会具有参考价值&#xff0…