zoukankan      html  css  js  c++  java
  • el-select下拉加载(实现懒加载)

    情况:项目出现了下拉数据量过大,出现页面卡死问题,反馈到我这;
    当时实现思路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已选中未加载数据怎么办;
    别的不多说 我去优化了。可能有后续,发现自己变懒了 博客变少了。
  • 相关阅读:
    HDU 1025 Constructing Roads In JGShining's Kingdom (DP+二分)
    HDU 1158 Employment Planning
    HDU 2059 龟兔赛跑
    Csharp 简单操作Word模板文件
    Csharp windowform datagridview Clipboard TO EXCEL OR FROM EXCEL DATA 保存datagridview所有數據
    Csharp 讀寫文件內容搜索自動彈出 AutoCompleteMode
    Csharp windowform controls clear
    CSS DIV大图片右上角叠加小图片
    Csharp DataGridView自定义添加DateTimePicker控件日期列
    Csharp 打印Word文件默認打印機或選擇打印機設置代碼
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/10922005.html
Copyright © 2011-2022 走看看