Select 選擇器

Select 選擇器組件用於從一組選項中選擇一個或多個值，支持搜索、分組、自定義樣式等功能。

基本使用

基本的選擇器使用方法。

基本選擇器

請選擇一個選項

選中的值:

可清空

請選擇一個選項

選中的值:

禁用狀態

選項一

可搜索

輸入關鍵字搜索

選中的值:

多選模式

設置 multiple 屬性開啟多選模式，可以選擇多個選項。

多選模式

請選擇多個選項

選中的值: []

限制選擇數量 (最多3個)

選項一

選中的值: [ "option1" ]

多選 + 搜索

可搜索多選

選中的值: []

分組與禁用

支持選項分組和禁用特定選項。

分組選項

請選擇一個選項

選中的值:

分組 + 多選

請選擇多個選項

選中的值: []

分組 + 搜索

可搜索分組選項

選中的值:

禁用選項

某些選項被禁用

選中的值:

高級功能

支持加載狀態、自定義位置、尺寸等高級功能。

加載狀態

載入中...

空數據狀態

無數據

搜索無結果

搜索試試

試試搜索 "xyz" 看看無結果狀態

自定義位置

向上展開

向上展開

向下展開

向下展開

自動判斷

自動判斷

自定義尺寸

固定寬度 300px

固定寬度

最大高度 100px

限制高度

API

Props

屬性	類型	默認值	說明
modelValue	string | number | (string | number)[]	undefined	綁定值
options	SelectOption[]	[]	選項數據
disabled	boolean	false	是否禁用
clearable	boolean	false	是否可清空
placeholder	string	'請選擇'	佔位符
readonly	boolean	false	是否只讀
multiple	boolean	false	是否多選
maxSelections	number	undefined	多選時最大選擇數量
filterable	boolean	false	是否可搜索
filterMethod	(query: string, option: SelectOption) => boolean	undefined	自定義搜索方法
loading	boolean	false	是否加載中
noDataText	string	'暫無數據'	無數據時的文字
noMatchText	string	'無匹配數據'	搜索無結果時的文字
placement	'top' | 'bottom' | 'auto'	'auto'	下拉框位置
dropdownWidth	string | number	undefined	下拉框寬度
maxHeight	string | number	'200px'	下拉框最大高度

SelectOption

interface SelectOption {
  value: string | number
  label: string
  disabled?: boolean
  group?: string
}

Events

事件名	類型	說明
update:modelValue	(value: string | number | (string | number)[]) => void	值更新時觸發
change	(value: string | number | (string | number)[]) => void	值改變時觸發
focus	(event: FocusEvent) => void	獲得焦點時觸發
blur	(event: FocusEvent) => void	失去焦點時觸發
clear	() => void	清空時觸發
visible-change	(visible: boolean) => void	下拉框顯示/隱藏時觸發
remove-tag	(value: string | number) => void	多選模式下移除標籤時觸發

Slots

插槽名	說明
prefix	前綴內容
suffix	後綴內容

Methods

方法名	類型	說明
focus	() => void	使選擇器獲得焦點
blur	() => void	使選擇器失去焦點
toggleDropdown	() => void	切換下拉框顯示狀態