Select 選擇器
當(dāng)選項(xiàng)過多時(shí)，使用下拉菜單展示并選擇內(nèi)容。
基礎(chǔ)用法
適用廣泛的基礎(chǔ)單選。
v-model的值為當(dāng)前被選中的el-option的 value 屬性值。
禁用狀態(tài)
選擇器不可用狀態(tài)。
為el-select設(shè)置disabled屬性，則整個(gè)選擇器不可用。
可清空單選
包含清空按鈕，可將選擇器清空為初始狀態(tài)。
為el-select設(shè)置clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性僅適用于單選。
基礎(chǔ)多選
適用性較廣的基礎(chǔ)多選，用 Tag 展示已選項(xiàng)。
為el-select設(shè)置multiple屬性即可啟用多選，此時(shí)v-model的值為當(dāng)前選中值所組成的數(shù)組。默認(rèn)情況下選中值會以 Tag 的形式展現(xiàn)，你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。
自定義模板
可以自定義備選項(xiàng)。
將自定義的 HTML 模板插入el-option的 slot 中即可。
分組
備選項(xiàng)進(jìn)行分組展示。
使用el-option-group對備選項(xiàng)進(jìn)行分組，它的label屬性為分組名。
可搜索
可以利用搜索功能快速查找選項(xiàng)。
為el-select添加filterable屬性即可啟用搜索功能。默認(rèn)情況下，Select 會找出所有l(wèi)abel屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯，可以通過傳入一個(gè)filter-method來實(shí)現(xiàn)。filter-method為一個(gè)Function，它會在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。
遠(yuǎn)程搜索
從服務(wù)器搜索數(shù)據(jù)，輸入關(guān)鍵字進(jìn)行查找。
為了啟用遠(yuǎn)程搜索，需要將filterable和remote設(shè)置為true，同時(shí)傳入一個(gè)remote-method。remote-method為一個(gè)Function，它會在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。需要注意的是，如果el-option是通過v-for指令渲染出來的，此時(shí)需要為el-option添加key屬性，且其值需具有唯一性，比如此例中的item.value。
創(chuàng)建條目
可以創(chuàng)建并選中選項(xiàng)中不存在的條目。
使用allow-create屬性即可通過在輸入框中輸入文字來創(chuàng)建新的條目。注意此時(shí)filterable必須為真。本例還使用了default-first-option屬性，在該屬性打開的情況下，按下回車就可以選中當(dāng)前選項(xiàng)列表中的第一個(gè)選項(xiàng)，無需使用鼠標(biāo)或鍵盤方向鍵進(jìn)行定位。
注：如果 Select 的綁定值為對象類型，請務(wù)必指定 value-key 作為它的唯一性標(biāo)識。
Select Attributes
Select Events
Select Slots
Option Group Attributes
Option Attributes
Methods
Cascader 級聯(lián)選擇器
當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級結(jié)構(gòu)時(shí)，可通過級聯(lián)選擇器逐級查看并選擇。
基礎(chǔ)用法
有兩種觸發(fā)子菜單的方式。
只需為 Cascader 的options屬性指定選項(xiàng)數(shù)組即可渲染出一個(gè)級聯(lián)選擇器。通過props.expandTrigger可以定義展開子級菜單的觸發(fā)方式。
禁用選項(xiàng)
通過在數(shù)據(jù)源中設(shè)置 disabled 字段來聲明該選項(xiàng)是禁用的。
本例中，options指定的數(shù)組中的第一個(gè)元素含有disabled: true鍵值對，因此是禁用的。在默認(rèn)情況下，Cascader 會檢查數(shù)據(jù)中每一項(xiàng)的disabled字段是否為true，如果你的數(shù)據(jù)中表示禁用含義的字段名不為disabled，可以通過props.disabled屬性來指定（詳見下方 API 表格）。當(dāng)然，value、label和children這三個(gè)字段名也可以通過同樣的方式指定。
可清空
通過 clearable 設(shè)置輸入框可清空。
僅顯示最后一級
可以僅在輸入框中顯示選中項(xiàng)最后一級的標(biāo)簽，而不是選中項(xiàng)所在的完整路徑。
屬性show-all-levels定義了是否顯示完整的路徑，將其賦值為false則僅顯示最后一級。
多選
可通過 props.multiple = true 來開啟多選模式。
在開啟多選模式后，默認(rèn)情況下會展示所有已選中的選項(xiàng)的Tag，你可以使用collapse-tags來折疊Tag。
選擇任意一級選項(xiàng)
在單選模式下，你只能選擇葉子節(jié)點(diǎn)；而在多選模式下，勾選父節(jié)點(diǎn)真正選中的都是葉子節(jié)點(diǎn)。啟用該功能后，可讓父子節(jié)點(diǎn)取消關(guān)聯(lián)，選擇任意一級選項(xiàng)。
可通過 props.checkStrictly = true 來設(shè)置父子節(jié)點(diǎn)取消選中關(guān)聯(lián)，從而達(dá)到選擇任意一級選項(xiàng)的目的。
動(dòng)態(tài)加載
當(dāng)選中某一級時(shí)，動(dòng)態(tài)加載該級下的選項(xiàng)。
通過lazy開啟動(dòng)態(tài)加載，并通過lazyload來設(shè)置加載數(shù)據(jù)源的方法。lazyload方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)node為當(dāng)前點(diǎn)擊的節(jié)點(diǎn)，第二個(gè)resolve為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用)。為了更準(zhǔn)確的顯示節(jié)點(diǎn)的狀態(tài)，還可以對節(jié)點(diǎn)數(shù)據(jù)添加是否為葉子節(jié)點(diǎn)的標(biāo)志位 (默認(rèn)字段為leaf，可通過props.leaf修改)，否則會簡單的以有無子節(jié)點(diǎn)來判斷是否為葉子節(jié)點(diǎn)。
可搜索
可以快捷地搜索選項(xiàng)并選擇。
將filterable賦值為true即可打開搜索功能，默認(rèn)會匹配節(jié)點(diǎn)的label或所有父節(jié)點(diǎn)的label(由show-all-levels決定)中包含輸入值的選項(xiàng)。你也可以用filter-method自定義搜索邏輯，接受一個(gè)函數(shù)，第一個(gè)參數(shù)是節(jié)點(diǎn)node，第二個(gè)參數(shù)是搜索關(guān)鍵詞keyword，通過返回布爾值表示是否命中。
自定義節(jié)點(diǎn)內(nèi)容
可以自定義備選項(xiàng)的節(jié)點(diǎn)內(nèi)容。
可以通過scoped slot對級聯(lián)選擇器的備選項(xiàng)的節(jié)點(diǎn)內(nèi)容進(jìn)行自定義，scoped slot會傳入兩個(gè)字段 node 和 data，分別表示當(dāng)前節(jié)點(diǎn)的 Node 對象和數(shù)據(jù)。
級聯(lián)面板
級聯(lián)面板是級聯(lián)選擇器的核心組件，與級聯(lián)選擇器一樣，有單選、多選、動(dòng)態(tài)加載等多種功能。
和級聯(lián)選擇器一樣，通過options來指定選項(xiàng)，也可通過props來設(shè)置多選、動(dòng)態(tài)加載等功能，具體詳情見下方API表格。
Cascader Attributes
Cascader Events
Cascader Methods
Cascader Slots
CascaderPanel Attributes
CascaderPanel Events
CascaderPanel Methods
CascaderPanel Slots
Props
