基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件el-select

背景：在某些使用情况下，单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担，从而造成性能问题。 ——vue3+element-plus有现成的轮子。而vue2+element-ui没有。
以下 文章大部分 摘自 源组件中的README.md

Select V2 虚拟列表选择器

基于 Element UI

适用于 Vue 2 版本的虚拟列表选择器组件。

在线演示

在线演示

使用说明

安装

npm i el-select-v2 -S

全局引入

//全局引入import ElSelectV2 from'el-select-v2';
  Vue.use(ElSelectV2);

局部引入

<template><el-select-v2v-model="value":options="options"/></template><script>//局部引入import ElSelectV2 from'el-select-v2'exportdefault{components:{
      ElSelectV2 
    },data(){return{options:[],value:'',};},created(){for(let i =0; i <10000; i++){this.options.push({value:`value ${i +1}`,label:`label ${i +1}`,});}},};</script>

插槽的使用

<template><el-select-v2v-model="student"placeholder="请选择学生"filterable:options="dataList"value-key="studentId"label-key="studentName"><template#default="{ item }"><span>{{ item.studentName }}哈哈哈</span></template></el-select-v2></template><script>//局部引入import ElSelectV2 from'el-select-v2'exportdefault{components:{
      ElSelectV2 
    },data(){return{dataList:[],student:'',};},created(){for(let i =0; i <10000; i++){this.dataList.push({studentId:`value ${i +1}`,studentName:`label ${i +1}`,});}},};</script>

示例代码

示例代码

Select Attributes

参数说明类型可选值默认值value / v-model绑定值boolean / string / number——options列表数据array——value-keyvalue 键名string—valuelabel-keylabel 键名string—labelmin-item-size每个选项的最小高度number—34multiple是否多选boolean—falsedisabled是否禁用boolean—falsesize输入框尺寸stringmedium/small/mini—clearable是否可以清空选项boolean—falsecollapse-tags多选时是否将选中值按文字的形式展示boolean—falsemultiple-limit多选时用户最多可以选择的项目数，为 0 则不限制number—0nameselect input 的 name 属性string——autocompleteselect input 的 autocomplete 属性string—offplaceholder占位符string—请选择filterable是否可搜索boolean—falseallow-create是否允许用户创建新条目，需配合

filterable

使用boolean—falsefilter-method自定义搜索方法function——remote是否为远程搜索boolean—falseremote-method远程搜索方法function——loading是否正在从远程获取数据boolean—falseloading-text远程加载时显示的文字string—加载中no-match-text搜索条件无匹配时显示的文字，也可以使用

slot="empty"

设置string—无匹配数据no-data-text选项为空时显示的文字，也可以使用

slot="empty"

设置string—无数据popper-classSelect 下拉框的类名string——reserve-keyword多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词boolean—falsedefault-first-option在输入框按下回车，选择第一个匹配项。需配合

filterable

或

remote

使用boolean—falsepopper-append-to-body是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 falseboolean—trueautomatic-dropdown对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单boolean—false

Select Events

事件名称说明回调参数change选中值发生变化时触发目前的选中值visible-change下拉框出现/隐藏时触发出现则为 true，隐藏则为 falseremove-tag多选模式下移除tag时触发移除的tag值clear可清空的单选模式下用户点击清空按钮时触发—blur当 input 失去焦点时触发(event: Event)focus当 input 获得焦点时触发(event: Event)

Select Slots

name说明—自定义模板，参数为 { item }prefixSelect 组件头部内容empty无选项时的列表

Options

参数说明类型可选值默认值value选项的值string/number/object——label选项的标签，若不设置则默认与

value

相同string/number——disabled是否禁用该选项boolean—false

Methods

方法名说明参数focus使 input 获取焦点—blur使 input 失去焦点，并隐藏下拉框—