iview 分页改变每页条数时请求两次问题

  • 问题

在iview page分页的时候,修改每页条数时,会发出两次请求。
iview 版本是4.0.0

  • 原因

iview 的分页在调用@on-page-size-change之前会调用@on-Change。默认会先调用@on-Change回到第一页,再调用@on-page-size-change改变分页显示数量

此时就会出现回到第一页,在返回调用@on-page-size-change时的页数,造成当前页没有数据。

举个例子,就是点击最后一页然后修改每页条数就是@on-page-size-change,但这是会先调用@on-Change回到第一页获取数据,然后在调用@on-page-size-change回到最后一页获取数据,就会出现错误,因为每页条数改变后就没有那么多页了,出现分页样式错误和没有数据。

  • 解决

在@on-page-size-change事件中,判断pageNum === 1时在调用this.getList();获取数据,这时就只调用一次。

     // 修改页数changePageNum(no){this.pageOptions.pageNo = no;this.getList();},// 修改每页大小changePageSize(size){this.pageOptions.pageSize = size;this.pageOptions.pageNum === 1 && this.getList();},

结果就是改变每页条数之后回到第一页并根据修改后的每页的条数获取数据。

这是本人在使用iview的分页的时候遇到的问题。这里讲的可能不是很清楚,请谅解。可以到github上看别的讲解传送门

\color{pink}{欢迎交流讨论}

最后编辑于:2025-04-21 11:06:55


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

一周学会Pandas2 Python数据处理与分析-Pandas2复杂数据查询操作

锋哥原创的Pandas2 Python数据处理与分析 视频教程: 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 前面我们学了.loc[]等几个简单的数据筛选操作,但实际业务需求往 往需要按照一定的条件甚至复杂的组合条件…

【Vue bug】:deep()失效

vue 组件中使用了 element-plus 组件 <template><el-dialog:model-value"visible":title"title":width"width px":before-close"onClose"><div class"container" :style"{height:height px}"&g…

Trae 安装第三方插件支持本地部署的大语言模型

Trae 安装第三方插件支持本地部署的大语言模型 0. 引言1. 安装插件 0. 引言 字节发布的 Trae IDE 一直不支持本地部署的的大语言模型。 Qwen3 刚刚发布&#xff0c;想在 Trae 中使用本地部署的 Qwen3&#xff0c;我们可以在 Trae 中安装其他插件。 1. 安装插件 我们可以安装…

JavaScript 中的 Proxy 与 Reflect 教程

目录 get 和 set 捕获器详解 为什么要用 Reflect? 使用语法间接调用内部方法 使用 Reflect 直接调用内部方法 对比总结: Reflect API 及其与 Proxy 的配合 Proxy 的典型应用场景 Proxy 是 ES6 引入的一种元编程特性。它允许创建一个代理对象来包装目标对象,并拦截对目标…

基于STM32的心电图监测系统设计

摘要 本论文旨在设计一种基于 STM32 微控制器的心电图监测系统&#xff0c;通过对人体心电信号的采集、处理和分析&#xff0c;实现对心电图的实时监测与显示。系统采用高精度的心电信号采集模块&#xff0c;结合 STM32 强大的数据处理能力&#xff0c;能够有效去除噪声干扰&a…

C语言----操作符详解(万字详解)

目录 1. 操作符的分类 2. 二进制和进制转换 3. 原码 反码 补码 4. 移位操作符 4.1 左移操作符 >> 4.2 右移操作符 >> 5. 位操作符 5.1 按位与 & 5.2 按位或 | 5.3 按位异或 ^ 5.4 按位取反 ~ 练习 整数存储在内存中二进制中1的个数 练习 二进制位…

【进阶】C# 委托(Delegate)知识点总结归纳

1. 委托的基本概念 定义&#xff1a;委托是一种类型安全的函数指针&#xff0c;用于封装方法&#xff08;静态方法或实例方法&#xff09;。 核心作用&#xff1a;允许将方法作为参数传递&#xff0c;实现回调机制和事件处理。 类型安全&#xff1a;委托在编译时会检查方法签…

WebRTC 服务器之Janus视频会议插件信令交互

1.基础知识回顾 WebRTC 服务器之Janus概述和环境搭建-CSDN博客 WebRTC 服务器之Janus架构分析-CSDN博客 2.插件使用流程 我们要使⽤janus的功能时&#xff0c;通常要执⾏以下操作&#xff1a; 1. 在你的⽹⻚引入 Janus.js 库&#xff0c;即是包含janus.js&#xff1b; <…

Go语言中的无锁数据结构与并发效率优化

1. 引言 在高并发系统开发中&#xff0c;性能瓶颈往往出现在并发控制上。作为一个有着10年Go开发经验的后端工程师&#xff0c;我见证了无数因锁竞争导致的性能问题&#xff0c;也亲历了无锁编程为系统带来的巨大提升。 传统的锁机制就像是十字路口的红绿灯——虽然能确保安全…

STM32部分:2、环境搭建

飞书文档https://x509p6c8to.feishu.cn/wiki/DQsBw76bCiWaO4kS8TXcWDs0nAh Keil MDK用于编写代码&#xff0c;编译代码芯片支持包&#xff0c;用于支持某类芯片编程支持STM32CubeMX用于自动生成工程&#xff0c;减少手动重复工作 STM32F1系列芯片支持包 软件下载 直接下载&am…

U3D工程师简历模板

模板信息 简历范文名称&#xff1a;U3D工程师简历模板&#xff0c;所属行业&#xff1a;其他 | 职位&#xff0c;模板编号&#xff1a;B29EPQ 专业的个人简历模板&#xff0c;逻辑清晰&#xff0c;排版简洁美观&#xff0c;让你的个人简历显得更专业&#xff0c;找到好工作。…

Java设计模式: 实战案例解析

Java设计模式: 实战案例解析 在软件开发中&#xff0c;设计模式是一种用来解决特定问题的可复用解决方案。它们是经过实践验证的最佳实践&#xff0c;能够帮助开发人员设计出高质量、易于维护的代码。本文将介绍一些常见的Java设计模式&#xff0c;并通过实战案例解析它们在实际…

Vue3源码学习5-不使用 `const enum` 的原因

文章目录 前言✅ 什么是 const enum❌ 为什么 Vue 3 不使用 const enum1. &#x1f4e6; **影响构建工具兼容性**2. &#x1f501; **难以做模块间 tree-shaking**3. &#x1f9ea; **调试困难**4. &#x1f4e6; **Vue 是库&#xff0c;不掌控用户配置** ✅ 官方推荐做法&…

C++学习:六个月从基础到就业——C++11/14:lambda表达式

C学习&#xff1a;六个月从基础到就业——C11/14&#xff1a;lambda表达式 本文是我C学习之旅系列的第四十篇技术文章&#xff0c;也是第三阶段"现代C特性"的第二篇&#xff0c;主要介绍C11/14中引入的lambda表达式。查看完整系列目录了解更多内容。 引言 Lambda表达…

AIDC智算中心建设:计算力核心技术解析

目录 一、智算中心发展概览 二、计算力核心技术解析 一、智算中心发展概览 智算中心是人工智能发展的关键基础设施&#xff0c;基于人工智能计算架构&#xff0c;提供人工智能应用所需算力服务、数据服务和算法服务的算力基础设施&#xff0c;融合高性能计算设备、高速网络以…

IoTDB时序数据库V2.0.2大版本更新的一些梳理

一些小知识&#xff1a; 关于事务&#xff1a;时序数据库是没有事务的&#xff0c;它和关系数据库的应用场景不同&#xff0c;通常情况下不需要多点同时操作同一条数据&#xff0c;而且要保证极高的吐出量&#xff0c;事务太消耗资源&#xff0c;并且时序数据库提供了覆写的功能…

CSS定位详解

在前端开发中&#xff0c;CSS 定位&#xff08;positioning&#xff09;是一个核心概念&#xff0c;它决定了元素在页面上的位置和布局方式。无论是构建复杂的交互界面&#xff0c;还是实现简单的页面排版&#xff0c;CSS 定位都是不可或缺的工具。本文将全面介绍 CSS 中的五种…

React 语法扩展

useReducer钩子函数 不同action类型返回不同处理行为 useState()函数返回解构为两个值 state当前状态 dispatch修改状态函数 dispatch()函数参数为一个actuon对象 如 &#xff1a; 样例&#xff1a; import { useReducer } from react; import ./App.css;// 定义一个Reduce…

MCP协议与Dify集成教程

一、MCP协议概述 MCP&#xff08;Model Control Protocol&#xff09;是一种新兴的开放协议&#xff0c;为大型语言模型&#xff08;LLM&#xff09;与外部应用之间构建了双向通信通道。它就像是AI的"USB-C"接口&#xff0c;帮助模型发现、理解并安全调用各种外部工…

学习springboot-条件化配置@Conditional(条件注解)

前言 在Spring Boot中&#xff0c;Conditional 注解及其相关注解是用于条件化配置的重要工具。它们允许开发者根据特定条件决定是否加载某个Bean或配置类。 注意&#xff1a;Conditional 相关注解&#xff0c;通常和Bean搭配使用 学习springboot-Bean管理&#xff08;Bean 注…