。

在传统的列表中#xff0c;当用户滚动到底部时#xff0c;列表会加载所有的数据#xff0c;这可能导…el-select

element-ui组件中的select下拉选择组件支持单选、多选等

虚拟列表

虚拟列表是一种优化技术用于处理大型列表。

在传统的列表中当用户滚动到底部时列表会加载所有的数据这可能导致性能问题和内存泄漏。

虚拟列表通过只加载当前可见的部分数据而不是整个列表的数据来解决这个问题。

当用户滚动到新的区域时虚拟列表会自动加载新的数据从而提高性能和响应速度。

这种技术通常与虚拟滚动结合使用可以在保持高性能和流畅性的同时支持大量的数据呈现。

在做管理系统下拉选择框是个必备功能在实际开发中下拉数据量是不可控的el-select虽然有过滤筛选等功能但是如果数据过大的时候会导致浏览器卡死在切换页面时销毁这个也很耗时导致页面切换体验性很差所以需要处理这种情况

最简单处理方案

默认下拉是空只支持过滤筛选实现filterMethod可以手动控制展示的数据量

最终处理方案

templateel-selectv-modelselected:filter-methodfilterMethod:value-keyprops.key

props.key

props.valuefocusselectMethodfilterableclearabledefault-first-optionv-bind$attrsv-on$listenersrefcustomSelecttemplate

slotprefixslot

nameprefix/slot/templateel-option

v-foritem

:labelitem[props.label]/el-option/el-select

/templatescript

this.initSelect();},},},mounted()

{this.scrollDom

this.$refs.customSelect.$refs.scrollbar.$refs.wrap;this.scrollDom.addEventListener(scroll,

{this.scrollDom.removeEventListener(scroll,

200));},methods:

{this.loadData();}},firstLoad()

{//

(Object.prototype.toString.call(this.selected)

[object

{this.filterMethod();}},filterMethod(str)

{this.filterList

item[this.props.label].indexOf(str)

-1;});this.firstLoad();},initSelect()

{let

(Object.prototype.toString.call(this.selected)

[object

param.indexOf(item[this.props.value])

{if