遇到这个问题的小伙伴过来围观啦!
解决问题的思路:首先问题的原因是因为antd的select的option过多,才会导致渲染的速度很慢。那么我们可以控制select渲染的条数,这样下拉就不会卡顿。有人会问:"如果渲染的条数变少了,那么select的数据也就少了,如果想实现选择和搜索共存的效果,会影响搜索的数据准确性,因为有些数据是没有在select的option里的“,这里给大家提供一种既能控制渲染条数,又能实现全部搜索的解决办法!
首先使用select的onPopupScroll属性,利用这个属性我们可以实现流加载数据的功能
一次我们只渲染很少的数据给用户,用户下拉到滚动条底部的时候,我们再渲染新的一批数据进来,这样就解决下拉数据卡顿的问题,思想类似分页。
这个函数的功能就是当用户滑动滚动条到底部时,加载新的一页的数据,this.loadOption函数负责加载数据,该函数接收一个页码,依此加载下一批新的数据。
如果用户没有输入搜索词,我们就给他第一页的数据,如果给了搜索词,我们根据搜索词去获得数据,这里我自己做的搜索功能,能实现拼音和汉字搜索,代码就不给了。我们看一下搜索功能如果搜索。