【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效

最新推荐文章于 2024-08-24 02:26:24 发布
原创 最新推荐文章于 2024-08-24 02:26:24 发布 · 546 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #css #css3 #前端

本文详细讨论了在使用Element-UI的v-infinite-scroll时，为何不应在该组件上同时使用v-if或v-show指令。这样做可能导致无限滚动加载功能失效，影响用户体验。解决方案是正确配置和管理加载状态，确保元素始终存在以触发滚动事件。

【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效

精选资源
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在Vue.js开发中，Element UI库的`el-table`组件是一个强大的数据展示工具，它可以适应各种复杂的场景。在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将...
Element InfiniteScroll无限滚动的具体使用方法
12-28
基础用法 {{ i }} [removed] export default { data () { return { count: 0 } }, methods: { load () { this.count += 2 } } } [removed] 禁用
【js】解决 v-if “不生效”
weixin_52418790的博客
09-06 6995
v-if = ‘showAnswer’不生效，一直为true
vue-infinite-scroll
故里的博客
11-03 2428
1.安装 npm install vue-infinite-scroll --save 2.如果多处用到可以考虑在main.js中引入。如果只有单个页面使用，可以考虑在当前页中引入。 import infiniteScroll from 'vue-infinite-scroll' import Vue from 'vue';（当前页中须引入） Vue.use(infiniteScroll) 3.使用 <div v-infinite-scroll="handleInfiniteOnL
v-infinite-scroll失效，v-infinite-scroll在弹窗中失效，在dialog中失效
qbbhgn的博客
11-03 4766
v-infinite-scroll滚动到底或第一次都无法生效
ElementUI中InfiniteScroll无法控制自动加载问题的解决
楊帥
04-26 1万+
InfiniteScroll官方文档 使用官方文档中的禁用加载例子来说明 <div class="first_left"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scr...
vue中使用vue-infinite-scroll
李水灵的博客
11-14 7868
都要新建一个vue+webpack的项目，建立过程这里不再赘述。 一.vue-infinite-scroll 安装 cnpm i vue-infinite-scroll --save main.js中引入 import vueiInfinite from 'vue-infinite-scroll' Vue.use(vueiInfinite) 在.vue文件中使用 &lt;ul c...
自定义指令directives:防抖,节流,element-ui的无限滚动在el-table上使用的封装
叮当的猫猫的博客
07-13 1599
然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令，3.update：所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了改变，也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新。1.bind:只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。2.局部注册，在用到的组件内注册并使用，使用如上，下面局部注册引用。2.局部注册，在用到的组件内注册并使用，使用如上，下面局部注册引用。
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1380
Element-UI自学实践
el-select v-infinite-scroll 不生效
最新发布
10-29
在 Element UI 的 el-select 组件中使用 v-infinite-scroll 指令时，可能会遇到指令不生效的问题。以下是完整的解决方案和实现代码： ## 问题分析 v-infinite-scroll 不生效的主要原因： - el-select 的下拉框内容...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
vue-infinite-scroll 源码阅读&排坑
梅花寺
06-24 645
我们的前端项目中主要用第三方库来实现无限滚动列表。然而，在最近写一个需求时，发现基于来实现列表的无限滚动时，会有无法触发滚动事件的问题。这样导致了列表滚动到底部时，无法拉取新的数据。经过查阅第三方库的官方文档，以及参考项目中使用到此库的其他地方，发现在用法上没有什么异常。就此基于查看源码去做一个详细的研究。在下面找到了库所在的地方，很幸运，打包后的代码没有压缩成完全看不懂的样子，且仅有简短的行。这意味着我们理解代码的时间不需要太长。同时，后面我们能够直接修改打包后的文件来进行调试，验证研究中的各种猜想。按照
列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案
csyldjy的博客
04-28 4418
后台返回的分页数据需要实现滚动条触底加载下一页， 用了element-ui 的指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）
u012169390的博客
10-28 7942
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）现象先答案原因解决思路1、设置滚动元素的padding2、反复设置padding放弃，查看数据层3、读源码其他尝试1、可能是disabled 传值为false2、dom之间的嵌套关系、padding、margin3、嵌套了draggable 现象 1.我用14寸win笔记本开发连普通屏幕正常，测试用的笔记本（1920 分辨率，150%缩放）测出此问题 2.用chrome调试工具测试不同分辨率，某些分辨率偶尔复现此问题，小于
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
qq_45840993的博客
09-26 9419
不知道UI抽什么风，所有列表都没用分页器，一律采用滚动加载。但我又是个懒蛋，不想手写所以就用了element-plus的无限滚动，但是v-infinite-scroll和el-table这俩搁一块就有bug了啊！！！在网上找了半天没遇到相似问题，现在来记录一下。本次开发中其实可以不用el-table的，因为这个列表并不展示头部，但是我又极其热爱el-table，所以不顾老大劝阻还是用了。好了好了，问题就是——。
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效 的 解决方案
一个努力学习的程序猿
10-20 7891
Vue 项目使用 InfiniteScroll 无限滚动组件在部分浏览器失效，转而使用 JS 去实现无限滚动及其相关问题的解决方案
element ui无限滚动 InfiniteScroll 触底分页效果 使用及踩坑
未末的博客
11-22 9089
因为要做下拉触底效果，刚好看到element ui有这个无限滚动插件，就打算用一下，以前写的那个效果不好。 踩坑： 1.刚开始不知道需要安装，所以就直接使用导致报错 Failed to resolve directive: infinite-scroll 2.在直接使用的时候，滑动一直不生效。后来换到别的页面是生效的，反复排查发现在顶级div我用到了v-if，v-if初始值是false，在调用了接口之后才是true，这种情况下滚动不生效 3.可能是由于我页面布局的原因，导致我在使用infinite..
Element UI - v-infinite-scroll无限滚动组件
m0_70547044的博客
01-02 1万+
Element UI - v-infinite-scroll无限滚动组件
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值