最近遇到一個下拉框選項過多導致頁面太卡甚至卡死的問題，搜了一下懶加載以及遠程搜索方法，整理了一下： 1、el-select懶加載 el-select選擇器里的數據通過后端返回得到，這里返回了將近兩萬條數據，點開選擇器頁面就特別卡，所以最好采用懶加載方法，具體使用如下： 控件部分： 數據 ...

一、需求：下拉框支持遠程搜索，根據用戶輸入字符，調接口獲取數據渲染到下拉列表上，供用戶選擇。 二、為什么要做 防抖控制？在做遠程搜索時，如果每輸入1個字就調用1次接口，就會頻繁地掉接口請求數據，假設我們的查詢是"12345"，不考慮用戶輸入錯誤的情況，至少會請求5次。很明顯這樣頻繁地查詢數據庫 ...

1：要求 是一個下拉框，輸入關鍵字時，從接口中讀取關鍵字匹配，不輸入時，下拉框不出現。 效果圖如下： 若后端將全部數據都返回給前端了，前端又使用的是element框架，那么只需要在下拉框組件中加上 filterable 屬性即可，其他功能可查看屬性需要自行添加 ...

1. Vue的form表單實現下拉搜索框 2. 代碼 在<el-select> 中，加上 filterable 即可（v-model.trim：是過濾輸入的空格），clearable：輸入框帶清空輸入內容的功能 ...

先上效果圖： 組件特點： 模擬下拉框 可輸入文字搜索選項，keyup或input事件觸發搜索（並優化了原生keyup和input事件的問題） 數據源異步加載 滾動加載選項數據 同一頁面可重復使用該組件 技術工具說明： 基礎框架 ...

原理：類似分頁，設置高度，當超過一個高度再加載一頁數據 在賦值的時候，可能當前的select值沒有目標值，所以賦值時需要處理一下 ...

在實際開發中我們有時無法避免select下拉功能數據過大導致頁面卡頓（如在我在一次迭代中有一個select項接口返回了5000多條數據）。用戶體驗差！結合實際開發給出了3個解決方案： 　　方案1、select的無限加載； 　　方案2、select的分段加載； 　　方案3、select的模糊 ...

給select下拉框添加屬性 dropdownRender={menu => ( <div> ...