关于Vue项目触发分页时会请求两次？？？？

最新推荐文章于 2023-12-13 14:45:40 发布
最新推荐文章于 2023-12-13 14:45:40 发布
阅读量1.8k 收藏 2
点赞数 2
分类专栏： Vue开发经历 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jz_jingzhen/article/details/116225523
版权
本文揭示了在使用avue-curd时，如何避免Vue项目因分页操作导致的两次接口调用问题。通过调整on-load事件位置并理解事件触发机制，可以解决这一问题，确保数据获取效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于Vue项目触发分页时会请求两次？？？？

最近在使用avue-curd时，当分页或者每页获取数据数修改触发事件的时，获取数据的接口被调用了两次。
在这里插入图片描述
就是这个事件搞得鬼，大家把on-load事件删除，写在created或者mounted里就好了。触发两次是因为当触发current-change或者size-change事件时会导致avue-card的初始化，又触发了on-load事件。

【分页表格】Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
06-11 1563
自定义分页表格组件，是基于vue2.6.14、前端组件是element-ui、jQuery3.2.1的基础之上实现的，其中由于使用了slot具名插槽，slot具名插槽是vue2.6.x版本之后才支持的功能，所以需要保证vue.js的版本在2.6.x之上，这篇文章使用的【vue.js版本是vue2.6.14】。到此，自定义分页表格就完成啦。
Vue element 分页输入框 回车跳转 请求两次的问题
f351873170的博客
03-15 1155
目录我的问题我的代码发现问题解决方案验证方案总结 由于后台的懒惰，前端就要受罪。 我的问题 问题出现要求：总页数要大于1000条；跳页使用回车 后台传入的分页数据不是从1开始的，而是从0开始的，所以前端这边就要对后台的分页做大量的数据处理。我的问题也是处理这部分导致的 前端代码在接收分页数据时，我的处理是对接收的index+1，直接赋值给分页的current-page； 前端代码在前往中输入页码进行跳页时，我的处理是直接对输入的数据-1，然后直接赋值给请求参数，再进行请求； 在前往输入较大页码时
Avue篇《论avue-curd多级动态复杂表头》
weixin_53327841的博客
04-07 599
这篇笔记主要标注了 根据后端接口数据返回完成动态复杂表头。
vue3项目，点击分页器，列表接口请求两次的问题
weixin_43703816的博客
09-06 1447
vue3项目，点击分页器，列表接口请求两次的问题
VUE @load事件触发多次分页
偷得浮生半日闲
08-19 941
VUE @load事件触发多次分页
vue element 分页页面初始请求两次的问题
weixin_30846599的博客
01-17 1037
主要是插件监听值的变化，初始化没彻底 //分页初始化 pageSize:"", currentPage: 1, totalResult: '', pageNum: 1, <div class="panel footer_list" v-cloak> <el-pagination @size-change="hand...
vue elementui 分页组件，切换size执行两次接口解决方法
popstarqq的博客
08-06 1189
1 @size-change="handleSizeChange"；如下写法会莫名其妙执行两次 handleSizeChange(val, oldVal) { this.getAllEvents({ pageNo: this.pageNo, pageSize: val }); } handleSizeChange(val, oldVal) { this.page.
Vue.js实现分页查询功能
10-18
当分页控件触发分页事件时，会调用`getdata`函数进行数据请求，并更新分页控件的显示信息。 7. Vue.js实例的创建： 在Vue.js中，所有的页面动态内容都由Vue实例来管理。本文中创建了两个Vue实例，一个用于用户...
vue.js表格分页示例
10-21
在本篇文章中，将会详细介绍使用Vue.js实现表格分页功能的示例，并讲解其涉及的核心知识点，包括如何通过Ajax异步加载数据以及如何将分页功能组件化。 ### Vue.js表格分页组件 在Web开发中，表格数据展示常常需要...
vue+elementUI组件table实现前端分页功能
10-15
在Vue.js框架中，结合Element UI库，我们可以轻松地实现前端分页功能，尤其是在处理大量数据展示时。本文将深入探讨如何使用Vue和Element UI组件`el-table`和`el-pagination`来创建一个高效的前端分页系统。 首先，...
详解angular分页插件tm.pagination二次触发问题解决方案
12-10
今天在学习angularjs的分页插件时遇到了一个前端的问题，谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求，ajax向后台发送了两次请求，这对于强迫症患者来说是一个比较恶心和感到不舒服...
vue路由点击事件跳转两次的bug
qq_43959639的博客
10-01 871
原因a标签没设置src="javascript:;"
element-ui Pagination 分页请求两次问题修改
weixin_42381896的博客
10-10 4813
Pagination请求两次问题问题复现问题原因解决 问题复现 当我们请求API的时候，例如API返回总数为456条，我们按照10条每页，一共有46页。当我们选了6之后的页数之后，然后把size选择成100条（目的就是让current * size > total），这个时候，分页就会同时触发size选择函数以及current选择函数。 问题原因 因为我们的size和current都是双向绑...
解决 Vue2 点击事件要点击两次才生效的问题
joe0235的博客
09-27 6638
问题： 项目落地页使用 LinkedME 深度链接服务跳回App，单独在 jQuery 下没问题，可以正常点击跳转，但是放在 vue 的 methods 方法中，就需要点击2次才可以触发。 查了一些资料，基本都是创建封装 LinkedME 代码，然后 import 进去使用，但是我这个只是一个简单的功能网页，并不想做的那么复杂。 解决办法： 在 created 钩子里进行插件的初始化 例如： <div @click="linkPage">下载APP</div> <script
vue3：打开页面，onMounted的使用，多次被执行问题探究
m0_64427297的博客
12-13 7663
打开页面，onMounted的使用，多次被执行
element ui pagination组件 点击一次 current-change请求两次
qq_35071973的博客
05-29 1万+
element ui pagination组件 点击一次 current-change请求两次  每次切换页码都会定位到第一页 相当于点击了两次 第一次是正常请求 第二次就会当做是请求第一页的数据 原因是每次给total设置初始值 在请求成功并且有数据时才给total赋值，当该次请求无数据时，total则会是初始值（我设置的是0）这样对组件的显示就会有影响。total为0 默认回到了第一页。 ...
小心你的页面OnLoad、Page_Load被执行两次
weixin_30675247的博客
04-30 885
页面中在<table>标签里加了background属性后，页面OnLoad会被执行多次（经两次测试IE7和FF下情况一样）； 解决方法：去掉background属性，使用bgcolor属性或style{brackground:.....}； 转载于:https://www.cnblogs.com/NRabbit/archive/2010/04/30/1736132.html...
vue中使用axios请求接口，请求会发送两次
热门推荐
MM
07-23 1万+
vue中使用axios请求接口，请求会发送两次的问题 浏览器分为简单请求以及非简单请求： 解决方案： 跨域请求需要先发一次Option预请求，OPTIONS是检验是否允许跨域的，如果不希望OPTIONS请求， 直接让后端遇到option直接返回就可以了，前端可不做处理。...
avue的级联，会触发多次重复查询，这个问题怎么解决？
Java世界如此庞大，希望某个知识点能帮到大家
04-27 1062
avue的级联，会触发多次重复查询，这个问题怎么解决？
如何实现在Element Plus中，利用表格和树形结构展示懒加载的数据？每次用户点击以触发单次接口请求并更新显示内容？
最新发布
12-17
在Element Plus中，实现懒加载数据并在表格和树形结构中通过单次接口请求动态加载的内容，可以按照以下步骤操作： 1. **引入依赖**: 首先，在Vue项目中安装`element-plus`库，如果还没安装，可以在终端或命令行中运行： ``` npm install element-plus vue-router axios (假设你需要axios用于API请求) ``` 2. **组件结构设计**: - 创建一个表格组件和一个树形组件，这两个组件都应该有懒加载的功能，如`el-table-column`和`el-tree-node`。 ```html <template> <el-tree :data="lazyTreeData" @node-click="loadNode" lazy :load="loadNode"></el-tree> <el-table :data="lazyTableData" :tree-props="{children: &#39;children&#39;}" lazy :load="loadRow"> <!-- ... --> </el-table> </template> ``` 3. **状态管理**: 使用Vue的响应式系统或者Vuex来管理数据加载的状态。例如，创建一个数组或者对象来标记哪些数据已经加载，哪些还没有。 4. **懒加载函数**: - 对于树形结构，`loadNode`方法会在用户点击节点时触发： ```js async loadNode(node) { if (!node.data || node.loaded) return; const response = await yourApiCall(node.id); // 你的API请求 node.data = response.data; // 更新节点数据 node.loaded = true; // 标记为已加载 } ``` - 对于表格，`loadRow`方法类似，但会针对每一行触发请求： ```js async loadRow(row, treeNode) { if (row.loaded) return; const response = await yourApiCall(row.id); row.data = response.data; row.loaded = true; } ``` 5. **初始加载**: - 初始化时只加载第一层的数据，其余部分设置为默认的惰性加载状态。 - 在组件的`created`生命周期钩子中，可以对根节点进行首次加载。 6. **性能优化**: - 可以考虑使用分页加载，或者当滚动到某个区域时再发起请求，减少不必要的网络请求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值