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已選中未加載數據怎么辦;

別的不多說 我去優化了。可能有后續，發現自己變懶了 博客變少了。