1. 場景描述

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

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

(1)有時候服務端數據是經過計算返回給我們的，可能返回不是特別快，體驗不是很好

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

(3)僅僅通過前端能不能解決，如果能解決，豈不是減輕了服務端的工作和壓力

2.解決辦法

1? ) 分段加載：也不加載下拉項，通過點擊下拉框的時候，再去加載，此時的選項全部加載進來，該種情況只適用于緩加載情況，需要點擊加載完后才能下拉選項，體驗一般。

2 )提示：element-ui的select有一個fildter-method方法，我們可以通過這個方法來進行過濾下拉項

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

1

3 filterable4 :filter-method="userFilter"

5 clearable>

6

8 :key="item.userId"

9 :label="item.username"

10 :value="item.userId"

11 >

12

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.效果圖

總結

以上是生活随笔為你收集整理的elementui下拉框 清空_巧妙解决element-ui下拉框选项过多的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。