不知道你有沒有這樣的經歷，下拉框的選項很多，上萬個選項甚至更多，這個時候如果全部把資料放到下拉框中渲染出來，瀏覽器會卡死，體驗會特別不好
用人會說element-ui的select有乙個remote-method，支援遠端搜尋，我們讓服務端支援一下不就可以了，當然這是一種解決的方案。但是有時候這種方法有時候不一定適用
（1）有時候服務端資料是經過計算返回給我們的，可能返回不是特別快，體驗不是很好
（2）有時候資料可能只有幾千條，全部渲染又不太合適，一直掉介面不是特別好
（3）僅僅通過前端能不能解決，如果能解決，豈不是減輕了服務端的工作和壓力
1 ) 分段載入：也不載入下拉項，通過點選下拉框的時候，再去載入，此時的選項全部載入進來，該種情況只適用於緩載入情況，需要點選載入完後才能下拉選項，體驗一般。
假設我們有個下拉框是用來選擇使用者的
1<
el-select
2v-model
="userid"
3filterable
4:filter-method
="userfilter"
5clearable
>
6<
el-option
7v-for
="item in userlist"
8:key
="item.userid"
9:label
="item.username"
10:value
="item.userid"
11>
el-option
>
12el-select
>
userfilter(query = '') )如上所示，我們從後台獲取使用者列表，經過我們自己的過濾，我們每次只渲染50條資料，無論有多少資料，對我們來說也支援乙個變數，占個記憶體。當然資料越多，陣列的遍歷也會相應的慢，但是這個影響不大。if (arr.length > 50) else
},getuserwhitelist()
);},
我們不僅能過濾名字，還可以對我們制定的任一項進行過濾
優化：上面的**我們還可以適當優化下，只有發現了陣列長度超過了50項，我們就停止遍歷
elementUI下拉選擇select反應慢
最近遇到乙個很詭異的問題，elementui的select切換下拉選項，聯動另乙個下拉選項的選項資料時，變得很慢，改變選項後半天這個下拉框還不收起改變值，後面研究了一下，發現是change事件要執行完，下拉框才會收起改變值。但是我這個change事件要改變的是另乙個下拉框選項資料，這個資料有特別大上...
elementUI下拉樹元件封裝
使用元件 popover 彈出框 tree 樹形控制項 和 input 輸入框 用法 1 新建乙個.vue檔案，貼上以下元件封裝的 完全可以使用 2 在頁面需要使用下拉樹的地方呼叫即可。1 import selecttree from components selecttree selecttree...
element ui 下拉框載入事件寫法
根據搜尋條件去分頁載入選項列表，可以寫如下的指令 directives 使用的時候 select v loadmore loaddata option v for item,index in list key index label item.label value item.value async...