el select v2

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	—	—
value-key	value 鍵名	string	—	value
label-key	label 鍵名	string	—	label
options-key (1.4.6)	options 鍵名	string	—	options
disabled-key (1.4.1)	disabled 鍵名	string	—	disabled
object-key (1.4.0)	綁定值為物件類型時的鍵名	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 (1.1.0)	下拉框的寬度是否與輸入框相同，設定為false 後自動計算寬度，效能會降低	boolean	—	true

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 (1.3.0)	下拉清單頂部的內容
footer (1.3.0)	下拉清單底部的內容
prefix	Select 組件頭部內容
empty	無選項時的列表

Options

參數	說明	類型	可選值	預設值
value	選項的值	string/number/object	—	—
label	選項的標籤，若不設定則預設與value相同	string/number	—	—
options (1.2.0)	分組選項	array	—	—
disabled	是否停用該選項	boolean	—	false

Methods

方法名	說明	參數
focus	使input 獲取焦點	—
blur	讓input 失去焦點，並隱藏下拉框	—