Select 选择器

Select 组件用于从预定义的选项列表中选择一个或多个选项，支持单选和多选模式。

参数

Props

名称	类型	默认值	描述
modelValue	ModelValue	-	选择器值
items	SelectItem[]	[]	选项列表
options	SelectOption	{ label: 'label', value: 'value' }	选项配置
type	SelectType	'default'	多选模式下，选中的展示样式
size	ComponentSize	'medium'	选择器尺寸
placeholder	string	'请选择'	选择器占位符
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
clearable	boolean	false	是否可清除
popupProps	Omit<PopupProps, 'visible'>	-	popup 组件的 props

Slots

名称	描述	参数
default	自定义选项内容	{ item: SelectItem, $index: number }
tag	自定义多选标签内容	{ tag: SelectItem }
clear-icon	自定义清除图标	-
arrow	自定义箭头图标	-

Events

名称	描述	参数
update:modelValue	选中值变化时触发	(value: ModelValue) => void
change	选中值变化时触发	(value: ModelValue | SelectItem) => void
clear	清除选项时触发	-

示例

基础用法

基础的选择器用法，点击触发下拉菜单。

多选模式

设置 multiple 属性可以启用多选模式，支持选择多个选项。

自定义选项

通过 options 属性可以自定义选项的键名。

禁用选项

可以设置整个选择器禁用，或者设置特定选项禁用。

不同尺寸

提供三种不同尺寸的选择器。

TypeScript

// 选项类型定义
export interface SelectItem {
  label?: string;
  value?: string | number;
  disabled?: boolean;
  [key: string]: any;
}

// 选项参数
export interface SelectOption {
  label?: string;  // 选项标签。默认值 'label'
  value?: string;  // 选项值。默认值 'value'
}

// 选择器类型
export type SelectType = "default" | "tag";

// 组件尺寸
export type ComponentSize = "small" | "medium" | "large";