Skip to content

Select 选择器

当选项过多时,使用下拉菜单展示并选择内容。

基础用法

基础的选择器用法

请选择

当前选中值:

多选模式

通过设置 multiple 属性可以启用多选模式

当前选中值: []

禁用状态

通过设置 disabled 属性可以禁用整个选择器

禁用状态
包含禁用选项

可清空选择

通过设置 clearable 属性可以启用清空功能,用户可以清除已选项

可清空选择

当前选中值: option1

可过滤选项

通过设置 filterable 属性可以启用过滤功能,用户可以输入关键字快速查找选项

可过滤选项

当前选中值:

自定义模板

可以自定义备选项的显示内容

自定义模板

当前选中值:

不同尺寸

通过设置 size 属性可以使用不同尺寸的选择器

大尺寸:
大尺寸选择器
默认尺寸:
默认尺寸选择器
小尺寸:
小尺寸选择器

自定义宽度

通过设置 width 属性可以自定义选择器的宽度

默认宽度:
默认宽度 100%
200px宽度:
宽度为200px
50%宽度:
宽度为50%

属性

属性名类型默认值说明
modelValueString/Number/Array""绑定值,多选时为数组
multipleBooleanfalse是否多选
disabledBooleanfalse是否禁用
clearableBooleanfalse是否可以清空选项
placeholderString"请选择"占位文本
filterableBooleanfalse是否可搜索
sizeString"default"选择器尺寸,可选值:large/default/small
widthString"100%"选择器宽度

事件

事件名参数说明
update:modelValue(value: String/Number/Array)选中值变化时触发
change(value: String/Number/Array)选中值变化时触发
clear-点击清空按钮时触发
blur-失去焦点时触发
focus-获得焦点时触发

Option 属性

属性名类型默认值说明
valueString/Number-选项的值,必填
labelString-选项的标签,若不设置则默认与 value 相同
disabledBooleanfalse是否禁用该选项

插槽

插槽名说明
defaultOption 组件列表
prefix选择器头部内容
empty无选项时的列表