遇到這個(gè)問(wèn)題的小伙伴過(guò)來(lái)圍觀啦！

解決問(wèn)題的思路：首先問(wèn)題的原因是因?yàn)閍ntd的select的option過(guò)多，才會(huì)導(dǎo)致渲染的速度很慢。那么我們可以控制select渲染的條數(shù)，這樣下拉就不會(huì)卡頓。有人會(huì)問(wèn):"如果渲染的條數(shù)變少了，那么select的數(shù)據(jù)也就少了，如果想實(shí)現(xiàn)選擇和搜索共存的效果，會(huì)影響搜索的數(shù)據(jù)準(zhǔn)確性，因?yàn)橛行?shù)據(jù)是沒(méi)有在select的option里的“，這里給大家提供一種既能控制渲染條數(shù)，又能實(shí)現(xiàn)全部搜索的解決辦法！

首先使用select的onPopupScroll屬性，利用這個(gè)屬性我們可以實(shí)現(xiàn)流加載數(shù)據(jù)的功能

antd的onPopupScroll屬性

一次我們只渲染很少的數(shù)據(jù)給用戶，用戶下拉到滾動(dòng)條底部的時(shí)候，我們?cè)黉秩拘碌囊慌鷶?shù)據(jù)進(jìn)來(lái)，這樣就解決下拉數(shù)據(jù)卡頓的問(wèn)題，思想類(lèi)似分頁(yè)。

下拉滾動(dòng)函數(shù)

這個(gè)函數(shù)的功能就是當(dāng)用戶滑動(dòng)滾動(dòng)條到底部時(shí)，加載新的一頁(yè)的數(shù)據(jù)，this.loadOption函數(shù)負(fù)責(zé)加載數(shù)據(jù)，該函數(shù)接收一個(gè)頁(yè)碼，依此加載下一批新的數(shù)據(jù)。

加載數(shù)據(jù)

如果用戶沒(méi)有輸入搜索詞，我們就給他第一頁(yè)的數(shù)據(jù)，如果給了搜索詞，我們根據(jù)搜索詞去獲得數(shù)據(jù)，這里我自己做的搜索功能，能實(shí)現(xiàn)拼音和漢字搜索，代碼就不給了。我們看一下搜索功能如果搜索。

搜索功能