版本:
"vue": "^2.2.2"
"iview": "^2.0.0-rc.15"
大家好,我現(xiàn)在在用iview開(kāi)發(fā)后臺(tái)系統(tǒng),遇到Select組件數(shù)據(jù)項(xiàng)大于500以上時(shí)路由跳轉(zhuǎn)很慢的問(wèn)題。慢的時(shí)候要15秒以上才能跳轉(zhuǎn)。后來(lái)嘗試用了element ui,發(fā)現(xiàn)在也需要2秒左右的時(shí)間跳轉(zhuǎn)。
請(qǐng)問(wèn)Select 組件在數(shù)據(jù)量比較大的時(shí)候怎么處理才好降低跳轉(zhuǎn)切換時(shí)間?
iview
和element UI
都是一個(gè)毛病
每個(gè)選項(xiàng)都是一個(gè)組件,每個(gè)選項(xiàng)還要綁定若干事件。
你這500個(gè)以上的選項(xiàng),也就是說(shuō)光是這個(gè)Select
就有500個(gè)以上的組件,每個(gè)組件下屬的DOM
元素還被綁定若干事件,渲染起來(lái)當(dāng)然超級(jí)慢。
我之前也碰到了這個(gè)問(wèn)題,答案是除非你這個(gè)Select
不要用iview
或者element UI
,否則毫無(wú)辦法。 Select
不要用iview
或者element UI
,否則毫無(wú)辦法。
我是針對(duì)選項(xiàng)太多的Select
單獨(dú)寫(xiě)了個(gè)組件,當(dāng)然樣式風(fēng)格是仿照iview
的,畢竟風(fēng)格要保持一致,但是其內(nèi)部的業(yè)務(wù)邏輯和iview
我是針對(duì)選項(xiàng)太多的Select
單獨(dú)寫(xiě)了個(gè)組件,當(dāng)然樣式風(fēng)格是仿照iview
的,畢竟風(fēng)格要保持一致,但是其內(nèi)部的業(yè)務(wù)邏輯和iview
完全不同,做了很多針對(duì)性的優(yōu)化。
可以嘗試將數(shù)據(jù)分組,然后使用連級(jí)選擇來(lái)選擇數(shù)據(jù)。
一次請(qǐng)求很多數(shù)據(jù)當(dāng)然會(huì)很慢,你可以分頁(yè)顯示啊。
用tree組件時(shí)有4000節(jié)點(diǎn),基本處于卡死狀態(tài),沒(méi)辦法改成點(diǎn)擊才加載了。
select組件跳轉(zhuǎn),既然500節(jié)點(diǎn),一次性展示應(yīng)該也不是很友好,可以考慮帶搜索的select,每次根據(jù)搜索值返回固定50或者100個(gè),就是增加了后端邏輯。