情况:项目出现了下拉数据量过大,出现页面卡死问题,反馈到我这;
当时实现思路1.使用render函数去渲染下拉框 
试了发现卡死情况依然存在,所以尝试方法2

2.使用原生js去添加下拉框的<option>
页面卡死情况没了,但是变成原生select,数据量大 很难找到对应的人 要下拉去找很久;
只能说不完美  没达到我预想。

百度了 发现一篇地址:https://segmentfault.com/a/1190000017812498?utm_source=tag-newest 下拉懒加载的操作,我就借鉴了 
实现代码:

<el-select 
v-model="userId"
:filterable='true'
:default-first-option='true'
v-el-select-loadmore="loadmore"
placeholder="请选择用户">
<el-option
v-for="(item,index) in userItems"
:label="item.name"
:value="item.id"
:key="index"></el-option>
</el-select>
data(){
return {
userItems: [],//下拉数组
      formData: {   //下拉参数
        pageIndex: 1,
        pageSize: 20
      },
users:[]  //总数组
}
}
 
一个指令v-el-select-loadmore:
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        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();
          }
        });
      }
    }
  },
 
一个方法:loadmore
// 下拉加载
    loadmore() {
      this.formData.pageIndex++;
      this.getUsers(this.formData);
    },
 
 getUsers(v) {
      let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
      this.userItems = this.users.filter((item, index, arr) => {
        return index < num;
      });
    },
 
如此实现刚进页面显示前20条数据,往下滚动显示更多数据,就实现了懒加载。
还有几个待优化点:1下拉搜索是已加载的数据中找,而不是全部数据。2已选中未加载数据怎么办;
别的不多说 我去优化了。可能有后续,发现自己变懒了 博客变少了。

el-select下拉加载(实现懒加载)的更多相关文章

  1. 实现select下拉框的无限加载(懒加载)

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  2. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  3. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  4. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  5. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  6. vue 运用ElementUI,做select下拉框回显

    第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...

  7. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  8. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  9. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  10. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

随机推荐

  1. OpenCV Sobel 导数

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  2. PHP--foreach的问题

    <?php echo "<pre>"; $data = ['a', 'b', 'c']; foreach($data as $key => $val){ $ ...

  3. MAYA 卸载工具,完美彻底卸载清除干净maya各种残留注册表和文件

    是不是遇到MAYA/CAD/3DSMAX/INVENTOR安装失败?AUTODESK系列软件着实令人头疼,MAYA/CAD/3DSMAX/INVENTOR安装失败之后不能完全卸载!!!(比如maya, ...

  4. Linux中的AutoHotKey键映射替代方案

    Windows--AutoHotKey 初次了解AutoHotKey,是在Win下最爱效率神器: AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不在赘余. ...

  5. 吴裕雄--天生自然python编程:实例

    # 该实例输出 Hello World! print('Hello World!') # 用户输入数字 num1 = input('输入第一个数字:') num2 = input('输入第二个数字:' ...

  6. OSCACHE介绍

    Cache是一种用于提高系统响应速度.改善系统运行性能的技术.尤其是在Web应用中,通过缓存页面的输出结果,可以很显著的改善系统运行性能.本文中作者给大家介绍一个实现J2EE框架中Web应用层缓存功能 ...

  7. 漫说测试 | 研发虐我千百遍,我待bug如初恋

    的行业之一他们的运筹帷幄,他们的勾心斗角,只有自己知道.000,但绝对也是最枯燥的行业之一! IT可能是几个最高薪行业之一,但同时也绝对是最辛苦的行业之一!IT业是最需要创新能力的行业之一,但绝对也是 ...

  8. ubuntu16.04安装mysql5.6

    apt-get install software-properties-commonsudo add-apt-repository 'deb http://archive.ubuntu.com/ubu ...

  9. 手工创建 efi,msr 分区 · Virgil Chan

    昨天在帮同学装 win10 的时候,不小心(不知道那是什么东西)把原系统的 efi 和 msr 盘删了,用 WinNTsetup 安装时 EFI PART 总显示红叉,安装后也进不去系统,想想应该是找 ...

  10. 从 ListView 到 RecyclerView 的用法浅析

    文章目录 要走好明天的路,必须记住昨天走过的路,思索今天正在走着的路. ListView,一种在垂直滚动列表中显示条目的视图:RecyclerView,一种在局限的窗口呈现大数据集合的灵活视图.Rec ...