Select V2 虚拟列表选择器

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

在线演示

在线演示

使用说明

npm i el-select-v2 npm i element-ui

  import Vue from 'vue';
// 必须引入 element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElSelectV2 from 'el-select-v2';

Vue.use(ElSelectV2);

<template>
  <el-select-v2 v-model="value" :options="options"/>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: '',
      };
    },
    created() {
      for (let i = 0; i < 10000; i++) {
        this.options.push({
          value: `value ${i + 1}`,
          label: `label ${i + 1}`,
        });
      }
    },
  };
</script>

示例代码

示例代码

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
options	列表数据	array	—	—
props	配置选项，具体看下表	object	—	—
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
min-item-size	每个选项的最小高度	number	—	34
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用 slot="empty" 设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用 slot="empty" 设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	true
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	—	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	—	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	—	false
fit-input-width	下拉框的宽度是否与输入框相同，设置为 false 后自动计算宽度，性能会有所降低	boolean	—	true

Props

参数	说明	类型	默认值
value	指定选项的值为选项对象的某个属性值	string	value
label	指定节点标签为节点对象的某个属性值	string	label
options	指定选项的子选项为选项对象的某个属性值	string	options
disabled	指定选项的禁用为选项对象的某个属性值	string	disabled

Select Events

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

Select Slots

name	说明
—	自定义模板，参数为 { item }
header	下拉列表顶部的内容
footer	下拉列表底部的内容
prefix	Select 组件头部内容
empty	无选项时的列表

Options

参数	说明	类型	可选值	默认值
value	选项的值	string/number/object	—	—
label	选项的标签，若不设置则默认与 value 相同	string/number	—	—
options	分组选项	array	—	—
disabled	是否禁用该选项	boolean	—	false

Methods

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