el-select下拉加载（实现懒加载）自定义loadmore事件

使用场景：下拉框远程搜索数据量较大，导致dom渲染很慢，所以远程搜索要采用分页的形式，故自定义事件，实现滚动加载，具体如下：

1、自定义事件

创建directives.js，内部实现loadmore事件，代码如下：

import Vue from 'vue'Vue.directive('loadmore', {bind (el, binding) {// 获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');SELECTWRAP_DOM.addEventListener('scroll', function () {const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;if (CONDITION) {binding.value()}})}
})

main.js全局引用
import ‘@/util/directives.js’

2、组件中使用代码

<el-selectclass="roleSelect"v-model="item.roleId"v-loadmore="loadMoreFun"filterableremote:remote-method="getActorRole"@change="getRole($event,index)"placeholder="请搜索..."><el-optionv-for="item in roleList":key="item.roleId":label="item.roleName":value="item.roleId"></el-option></el-select>

/*** 鼠标滚动加载*/loadMoreFun() {this.page++;this.getActorRole(this.query)},// 获取所有角色getActorRole (query) {let timer;if (timer) {clearTimeout(timer)}timer = setTimeout(() => {if (query !== '') {if (query !== this.query) {this.page = 1;this.roleList = [];this.query = query;}let param = {page: this.page,rows: 20,sidx: "roleId",sord: "desc",roleName: query};get_role_query_roles(param).then(data => {if (data.code == '0') {if (data.result && data.result.length) {this.roleList = [...this.roleList, ...data.result];}}}).catch(() => {this.$openMessage('查询失败', "error");})}}, 300);},

参考博客：https://www.cnblogs.com/wangxiaoer5200/p/10922005.html

el-select下拉加载（实现懒加载）自定义loadmore事件相关推荐

h5、select下拉框右边加图标，深度美化页面增进用户体验
h5.select下拉框右边加图标,深度美化页面增进用户体验 1.那么我们先来看一下效果吧! 2.再看看h5的结构: <div id="login-div"><d ...
jquery手机端页面下拉刷新，上划加载更多
手机页面下拉刷新,上划加载更多,IOS不能下拉的问题解决 -转圈的是需要引用样式,代码删除了上划加载时的样子 <script type="text/javascript"& ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...
html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
select下拉框美化
http://dl.dbank.com/c04csxtesr 基本用法单选下拉框的写法与传统的一样.支持TAB键打开和上下箭头选择option.支持onchange事件,见下面选中项:2 代码如下 ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分,花费了几个月的时间才优化到令自己满意的一半程度,,,唉,一言难尽啊! 在此将几种方法总结一下,希望能帮到不少人吧- 图片的优化有两种方式: ...

el-select下拉加载（实现懒加载）自定义loadmore事件

el-select下拉加载（实现懒加载）自定义loadmore事件

1、自定义事件

2、组件中使用代码

el-select下拉加载（实现懒加载）自定义loadmore事件相关推荐

最新文章

热门文章