上传下载网站模板,安徽海鹏建设工程有限公司网站,涿州吧,徐州做网站设计需求背景
vue2+element-ui项目中，当el-select中数据量较大时（超出5000个dom节点），会导致页面加载和渲染卡顿、el-select下拉列表延迟展开。
在现在的el-select的基础上使用分页或者虚拟列表的形式去处理大量的下拉菜单，可以保证页面的正常渲染及el-select的…需求背景
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
templatedivel-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]"
