1. 分页加载的概念 分页加载是指将大量数据分成多个页面,用户可以通过翻页来查看数据。这种方式可以有效减少一次性加载的数据量,降低服务器负载,提高页面加载速度,并改善用户体验。 2. 分页加载在Element Select中的应用 在Element UI中,el-select组件用于创建下拉选择框。当选项数据非常多时,如果一次性加载所有数据,可...
elementui的el-select数据多的时候添加分页 方式一(添加分页组件) 方式二(配合自定义指令实现) 新建全局js文件 (scroll.js) main.js中引入
},mounted() {// 获取dom节点constdomElementNode =document.querySelector('.more-next-box .el-select-dropdown__wrap')// 注册下拉滚动事件domElementNode.addEventListener('scroll',()=>{constisBottom = domElementNode.scrollHeight- domElementNode.scrollTop<= domElementNode.clientHeightif(isBottom) {c...
1.写一个指令 /** * select 下拉框 底部触发指令*/Vue.directive('selectLoadMore',{ bind (el, binding) {//获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll',function() {if(this....
有的小伙伴可能会说: 1.分页加载。确实是可以解决问题。 2.页面卡顿使用虚拟dom.超时喊后端自己优化代码因为项目中使用的是 element-ui,没有虚拟加载。不想 Ant Design Vue一样,有virtual属性,设置 true可以开启虚拟滚动。这里就感觉到 Ant Design Vue处理的比element-ui好一些(希望各位大佬不要喷我) 所以我们...
elementUI的select下拉框组件实现分页加载数据第⼀种⽅法：添加分页，页⾯样式如下，JS逻辑与平常分页没区别 <el-select :disabled="noChange[index]==true || applyDataItem.processKey == 'componentFastAdd'"style="width:68%"v-model="chooseUser[index]"clearable filterable placeholder="请选择⼈员">...
基于element-ui的el-select实现的。 已封装成组件,可以实现单选、多选、远程搜索、滚动分页加载数据、数据回显。 效果 微信截图_20210727173019.png 上代码 组件代码: <template><el-selectv-model="selectedValue"v-loadData="loadData"remotefilterable:remote-method="remoteMethod"class="more-select":popper-class=...
第二种方法:下拉加载更多 1.写一个指令 /** * select 下拉框 底部触发指令 */ Vue.directive('selectLoadMore',{ bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener...
简介: vue使用element ui实现下拉列表分页的功能!!!” 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一下吧。 实现的效果 image-20211103160459223 当时因为下拉框中的数据过多,所以想到使用分页的方式来实现。 现在来看看具体的实现吧。 准备分页的组件 ...
在项目开发过程中,总会遇到这样或者那样的问题,这次,用element-ui组件库的select,但是这个组件不支持分页加载更多,如果一次性把所有的数据都返回给前端,那还需要后端再加个接口。是不是有其他方式可以扩展下select? 在Vue文档中,找到了实现方式,那就是“注册自定义指令” ...