el select v2

Select V2 virtual list selector

Virtual list selector component based on Element UI for Vue 2 version.

Online demo

Online demo

Instructions for use

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 >

Sample code

Sample code

Select Attributes

parameter	illustrate	type	Optional value	default value
value/v-model	Binding value	boolean/string/number	—	—
options	List data	array	—	—
value-key	value key name	string	—	value
label-key	label key name	string	—	label
options-key (1.4.6)	options key name	string	—	options
disabled-key (1.4.1)	disabled key name	string	—	disabled
object-key (1.4.0)	The key name when the bound value is an object type	string	—	value
min-item-size	Minimum height for each option	number	—	34
multiple	Whether to select multiple	boolean	—	false
disabled	Whether to disable	boolean	—	false
size	Input box size	string	medium/small/mini	—
clearable	Is it possible to clear options	boolean	—	false
collapse-tags	Whether to display the selected value as text when making multiple selections	boolean	—	false
multiple-limit	The maximum number of items that the user can select when making multiple selections. If it is 0, there is no limit.	number	—	0
name	name attribute of select input	string	—	—
autocomplete	autocomplete attribute of select input	string	—	off
placeholder	placeholder	string	—	Please select
filterable	Is it searchable?	boolean	—	false
allow-create	Whether users are allowed to create new entries needs to be used with filterable	boolean	—	false
filter-method	Custom search method	function	—	—
remote	Whether it is a remote search	boolean	—	false
remote-method	Remote search method	function	—	—
loading	Whether data is being obtained remotely	boolean	—	false
loading-text	Text displayed during remote loading	string	—	loading
no-match-text	The text displayed when no search conditions match, you can also use slot="empty" setting	string	—	No matching data
no-data-text	The text displayed when the option is empty can also be set using slot="empty"	string	—	No data
popper-class	Select the class name of the drop-down box	string	—	—
reserve-keyword	When multi-select and searchable, whether to retain the current search keyword after selecting an option	boolean	—	true
default-first-option	Press Enter in the input box and select the first match. Need to be used with filterable or remote	boolean	—	false
popper-append-to-body	Whether to insert the popup box into the body element. When there is a problem with the positioning of the pop-up box, you can set this property to false	boolean	—	true
automatic-dropdown	For non-searchable Select, whether to automatically pop up the options menu after the input box gains focus	boolean	—	false
fit-input-width (1.1.0)	Whether the width of the drop-down box is the same as the input box. After setting it to false, the width will be automatically calculated and the performance will be reduced.	boolean	—	true

Select Events

event name	illustrate	callback parameters
change	Triggered when the selected value changes	Current selected value
visible-change	Triggered when the drop-down box appears/hides	True if it appears, false if it is hidden
remove-tag	Triggered when tag is removed in multi-select mode	Removed tag value
clear	Triggered when the user clicks the clear button in clearable radio mode	—
blur	Triggered when input loses focus	(event: Event)
focus	Triggered when input gets focus	(event: Event)

Select Slots

name	illustrate
—	Custom template, parameter is { item }
header (1.3.0)	Contents at the top of the drop-down list
footer (1.3.0)	Contents at the bottom of the drop-down list
prefix	Select component header content
empty	List without options

Options

parameter	illustrate	type	Optional value	default value
value	option value	string/number/object	—	—
label	The label of the option. If not set, it defaults to the same as value	string/number	—	—
options (1.2.0)	Grouping options	array	—	—
disabled	Whether to disable this option	boolean	—	false

Methods

method name	illustrate	parameter
focus	Make input get focus	—
blur	Make the input lose focus and hide the drop-down box	—