原文:Element-ui 下拉列表 選項過多時通過自定義搜索來解決卡頓問題

當使用Select選擇器時,如果下拉列表的數據量太多,會有一個明顯的卡頓體驗,例如: writer by:大沙漠 QQ: 例子里我們用options模擬大量的下拉數據,渲染如下: 由於下拉列表有幾千個,因此通過滾動條一個個的去找不是很現實的, 我們設置了filterable屬性,因此可以在下拉控件里進行搜索,如下: 體驗的過程中還是會感覺明顯的卡頓現象,問題和上面一樣,還是因為下拉列表太多了,怎么 ...

2019-11-28 18:31 1 1016 推薦指數:

查看詳情

Element-ui 下拉列表 選項過多時如何解決問題

當使用Select選擇器時,如果下拉列表有幾千個幾萬個,因此通過滾動條一個個的去找不是很現實, 這時可以對select設置filterable屬性,可以在下拉控件里進行搜索。例如: 體驗的過程中還是會感覺明顯的現象,問題和上面一樣,還是因為下拉列表太多了,這時我們可以通過Select控件 ...

Wed Mar 18 07:03:00 CST 2020 0 2552
解決element-ui下拉框數據過多,導致頁面問題與本地分頁功能實現

效果 前情提要: 最近使用element-ui開發的一個頁面,在打開的時候占用cpu非常高,有時候都能達到90%↑。在調試時發現其中一個下拉框的接口返回2k↑的數據。本着有問題問百度的精神,看到主要的解決方案有如下兩種: 監聽下拉框滾動事件,去服務端請求數據 https ...

Tue Mar 30 18:28:00 CST 2021 0 512
巧妙解決element-ui下拉框選項過多問題

1. 場景描述 不知道你有沒有這樣的經歷,下拉框的選項很多,上萬個選項甚至更多,這個時候如果全部把數據放到下拉框中渲染出來,瀏覽器會卡死,體驗會特別不好 用人會說element-ui的select有一個remote-method,支持遠程搜索,我們讓服務端支持一下不就可以了,當然這是一種解決 ...

Wed Jul 31 01:32:00 CST 2019 0 6359
巧妙解決element-ui下拉框選項過多問題

1. 場景描述 不知道你有沒有這樣的經歷,下拉框的選項很多,上萬個選項甚至更多,這個時候如果全部把數據放到下拉框中渲染出來,瀏覽器會卡死,體驗會特別不好 用人會說element-ui的select有一個remote-method,支持遠程搜索,我們讓服務端支持一下不就可以了,當然這是一種解決 ...

Tue Jul 09 03:47:00 CST 2019 0 531
解決AutoComplete數據過多時問題

如下代碼,data數據超過2千條時,每次輸入字符過濾時非常 其原因: 每次輸入變化,data就要從2000多條數據中過濾出目標元素,一過濾就導致AutoComplete下拉列表得變化,瀏覽器得重新繪制下拉列表的Dom,導致瀏覽器 解決辦法一 采用防抖函數,在間隔時間內,連續 ...

Mon Apr 15 19:28:00 CST 2019 0 514
自定義UI下拉列表Select

上班第一時間就是上來發文章,哈哈~!今天分享一點干貨——“自定義UI下拉列表Select”,是項目中用到的公用模塊,主要是分享CSS方面及HTML結構方面的東西。JS寫的很簡單,目地是為了擴展性,方便攻城師們在此基礎上做更多的擴展,應用到項目中去。你也可以直接前往DEMO頁 CSS和HTML ...

Wed May 09 18:42:00 CST 2012 6 1571
Element-ui 下拉列表 全選 多選時 select全選 新增一個選擇所有的選項

項目里經常會用到,在一個多選下拉框里新增一個選擇所有的選項,例如: 渲染如下: 此時可以多選,如果想要選擇所有選項時,得一個個去點擊,這樣不是很方便,我們可以在下拉框里新增一個選擇所有的選項,通過watch用幾行代碼就可以實現與其它選項的互斥來實現一鍵多選 ...

Tue Aug 06 15:33:00 CST 2019 7 8086
element-UI中el-select下拉框可搜索時候,filter-method自定義搜索方法

  使用element-UI框架的使用,我們經常使用el-select下拉框,很多時候還需要使用可搜索下拉框,然后elementUI官網的實例中只是提了一下filter-method可以自定義搜索方法,但是卻沒有詳細介紹怎么用,這里簡單介紹一下用法,希望對大家有點幫助 ...

Wed Feb 20 01:02:00 CST 2019 6 26317
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM