码迷,mamicode.com
首页 > 其他好文 > 详细

el-select下拉加载(实现懒加载)

时间:2019-05-25 13:00:23      阅读:1228      评论:0      收藏:0      [点我收藏+]

标签:rect   default   nbsp   方法   数组   list   condition   func   size   

情况:项目出现了下拉数据量过大,出现页面卡死问题,反馈到我这;
当时实现思路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下拉加载(实现懒加载)

标签:rect   default   nbsp   方法   数组   list   condition   func   size   

原文地址:https://www.cnblogs.com/wangxiaoer5200/p/10922005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!