香港公司网站备案百姓网

需求背景​​​​​​

vue2+element-ui项目中，当el-select中数据量较大时（超出5000个dom节点），会导致页面加载和渲染卡顿、el-select下拉列表延迟展开。

在现在的el-select的基础上使用分页或者虚拟列表的形式去处理大量的下拉菜单，可以保证页面的正常渲染及el-select的正常回显。

需求分析

主要涉及几个点：

1、下拉菜单主体实现虚拟展示，保证渲染效率
2、展开和关闭时要保证已选中的选项在虚拟列表内，保证回显的是 label，而不是 value
3、select 清空时，虚拟列表回归到顶部
4、下拉菜单发生改变时，重新计算滚动条长度，并回归到顶部
5、支持搜索、多选、disabled、collapse-tags场景。

完整代码

安装虚拟列表插件vue-virtual-scroller，我这边安装的是^1.1.2版本。

 封装组件virtualSelect.vue

<template><div><el-selectpopper-class="virtualselect"class="virtual-select-custom-style":value="defaultValue":filterable="field.props.filterable":filter-method="filterMethod":default-first-option="field.props.defaultFirstOption":popper-append-to-body="false":placeholder="$t(field.placeholder)":disabled="field.props.disabled":clearable="field.props.clearable":multiple="field.props.multiple":collapse-tags="field.props.collapseTags"v-bind="$attrs"@visible-change="visibleChange"v-on="$listeners"@clear="clearChange"@focus="focusChange"@change="selectChange"><div v-if="selectArr.length > 0" class="scroll-list-box"><RecycleScrollerref="virtualList":style="'height:' + calcScrollHeight() + 'px;'"class="scroller":items="selectArr":item-size="itemHeight":buffer="buffer":key-field="value"><template #default="{ item }"><el-option:key="item[value]":label="item[label]"