Select 选择器

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

下拉选择组件,用于在预定义选项中选择值,支持自定义选项样式、图标和徽章。

基础用法

通过 name 与表单字段关联,placeholder 设置占位提示文本,options 定义下拉列表项,可为每个选项添加图标、徽章或描述信息。
Template 示例:
<Select
name="city"
placeholder="请选择城市"
options={[
{ value: "beijing", label: "北京" },
{ value: "shanghai", label: "上海" },
{ value: "guangzhou", label: "广州" }
]}
/>
点击查看下拉选项。效果展示如下:



选择北京后,效果展示如下:




属性说明

属性名
类型
描述
默认值
name
string
表单字段名称
-
options
SelectOption[]
选项列表
-
onChangeAction
ActionConfig
值变化时触发的动作
-
placeholder
string
占位符文本
-
defaultValue
string
默认选中值
-
variant
"outline" | "solid" | "soft" | "ghost"
视觉样式
"outline"
size
"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
组件尺寸
"md"
pill
boolean
是否为胶囊形状
false
block
boolean
是否为块级元素 (100% 宽度)
false
disabled
boolean
是否禁用
false
clearable
boolean
是否显示清空按钮
false

SelectOption 对象

属性名
类型
描述
默认值
value
string
选项值
-
label
string
选项显示文本
-
icon
string
图标名称或 URL
-
badge
string
徽章文本
-
description
string
描述文本
-
color
string
选项颜色
-
disabled
boolean
是否禁用
false
className
string
自定义 CSS 类名
-
注意:
★ 标记为必填属性。