巧妙解決element-ui下拉框選項過多的問題

1. 場景描述

不知道你有沒有這樣的經歷，下拉框的選項不少，上萬個選項甚至更多，這個時候若是所有把數據放到下拉框中渲染出來，瀏覽器會卡死，體驗會特別很差

用人會說element-ui的select有一個remote-method，支持遠程搜索，咱們讓服務端支持一下不就能夠了，固然這是一種解決的方案。可是有時候這種方法有時候不必定適用

  （1）有時候服務端數據是通過計算返回給咱們的，可能返回不是特別快，體驗不是很好

  （2）有時候數據可能只有幾千條，所有渲染又不太合適，一直掉接口不是特別好

  （3）僅僅經過前端能不能解決，若是能解決，豈不是減輕了服務端的工做和壓力

2.解決辦法

   1  ) 分段加載：也不加載下拉項，經過點擊下拉框的時候，再去加載，此時的選項所有加載進來，該種狀況只適用於緩加載狀況，須要點擊加載完後才能下拉選項，體驗通常。

　2 ）提示：element-ui的select有一個fildter-method方法，咱們能夠經過這個方法來進行過濾下拉項

  　　假設咱們有個下拉框是用來選擇用戶的

 1 <el-select
 2   v-model="userId"
 3   filterable
 4   :filter-method="userFilter"
 5   clearable>
 6   <el-option
 7     v-for="item in userList"
 8     :key="item.userId"
 9     :label="item.username"
10     :value="item.userId"
11   ></el-option>
12 </el-select>

 

　

userFilter(query = '') {
  let arr = this.allUserList.filter((item) => {
    return item.username.includes(query) || item.userId.includes(query)
  })
  if (arr.length > 50) {
    this.userList = arr.slice(0, 50)
  } else {
    this.userList = arr
  }
},
getUserWhiteList() {
  HttpRequest.post("/api/admin/community/getUserWhiteList").then(
    response => {
      this.allUserList = response.data.list;
      this.userFilter()
    }
  );
},

　　

如上所示，咱們從後臺獲取用戶列表，通過咱們本身的過濾，咱們每次只渲染50條數據，不管有多少數據，對咱們來講也支持一個變量，佔個內存。固然數據越多，數組的遍歷也會相應的慢，可是這個影響不大。

咱們不只能過濾名字，還能夠對咱們制定的任一項進行過濾

優化：上面的代碼咱們還能夠適當優化下，只有發現了數組長度超過了50項，咱們就中止遍歷

3.效果圖