遇到这种情况,通常后端代码会将数据做成分页查询,前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。 正文代码 第一步,创建select-load-more.js文件 // 定义全局自定义指令 import Vue from 'vue' const selectLazyLoad = function(Vue) { // el-select组件数据过多,使用翻页加载数...
场景描述二:初始页面展示的是下拉框未加载的数据,初始页面跳转到编辑页面时的不回显的问题; 解决思路: 懒加载解决思路:监听滚动条事件,当滚动条到底时,增加显示数据个数; 回显解决思路:先把我们选中的数据加在列表最前面,当加载到了我们选中的数据后删除最前面我们自己加进去的数据。
}::-webkit-scrollbar{width:2px; } 第二种方法:下拉加载更多 1.写一个指令 /** * select 下拉框 底部触发指令*/Vue.directive('selectLoadMore',{ bind (el, binding) {//获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'...
当下拉框要展示大量数据内容时,并且下拉框不展示分页,那就不能手动点击分页去获取数据,那就只能利用监听滚动事件来实现了。 1. src下新建一个文件夹,创建一个指令 2. 在m...
所以我们只能选择异步加载。 当页面滑动到底部的时候,加载下一页的数据 下拉框滑动到底部触发事件,加载下一页的数据 我们首先需要做到的是:获取下拉框元素的DOM节点。 由于一个页面可能有多个dom节点。 我们需要使用 popper-class属性来设置Select下拉框的类名。
是一种用户界面组件,用于在网页或应用程序中创建具有滚动功能的下拉菜单。它可以在菜单项较多时提供更好的用户体验,使用户能够方便地浏览和选择菜单项。 该组件的主要特点和优势包括: 1. 滚动功能:可滚动...
这里运用到了滚动偏移来做监听来处理,这与聊天对话框中默认下拉到底部的原理是大同小异的,后续我会有专门的文章进行讲解。 // main.js// 注册滚动条加载触发事件v-loadmore绑定importdirectivesfrom'./directives'Vue.use(directives) AI代码助手复制代码
} 2、在el-select中绑定这个属性, loadmore 就是你的逻辑 <el-select v-el-select-loadmore="loadmore"> // 你的代码 </el-select> 3、loadmore 中写自己的逻辑 当鼠标滑到 option 下面的时候,就会触发 loadmore 函数,就可以实现鼠标下拉加载更多。
一级列表的数据会一次性正常拿到,现在是想实现二级列表的下拉滚动加载,我自己写时有用lazy懒加载,但我不知道该把下拉滚动获取的新数据怎么追加进去,我没办法主动调用lazyload 然后我就单纯的使用options拿到...