使用vue-virtual-scroller封装el-select
背景： 数据量过大element ui的下拉框会加载很多元素导致卡顿
每项定高即可
一.引入vue-virtual-scroller
要将样式文件一起引入进来
二.带有分组形式的下拉框使用el-tab实现不同分组
-
使用el-select自带的filterable方法会导致有很多空白项
如上图所示，所以这里需要重写一下filter-method方法即可在handleFilterMethod中处理更新不同的options。
细节1：如果搜索当前分组没有匹配项而其他分组有匹配项自动跳转到对应分组并展示
细节2：搜索后要将滚动重置最上方
2.展开下拉框后点击其他分组输入框失焦无法直接输入搜索
处理tab-click事件，点击tab时获取el-select对象手动执行foucs方法
3.点击输入框展开后由于虚拟滚动可能造成选中项还未渲染展示
监听el-select的visible-change事件，找到对应项，获取RecycleScroller实例，调用内部scrollToItem方法进行强制滚动并渲染
setTimeout(() => {
const scroller = this.$refs.scroller
if (Array.isArray(scroller)) {
const activeScroller = scroller.find((s) => s?.$el?.closest('.el-tab-pane')?.style.display !== 'none')
activeScroller?.scrollToItem(targetIndex)
} else {
scroller?.scrollToItem(targetIndex)
}
}, 200)
4.已选中的值直接回显时仍然由于由于虚拟滚动造成el-option没有渲染，el-select没办法匹配到value对应的label进行回显
监听传入该组件的传入值selectedValue和选项options，在RecycleScroller之外直接添加一个单独的el-option专门用于回显匹配。（因为el-select会根据el-option的内容自动按照value匹配展示对应的label)
5.点击输入框之后展示的内容下面可能会有空白
调整好bufferHeight的高度和整个容器的高度即可
