Skip to content
主题色
灰色
夜间模式组件大小小(1)中(2)大(3)组件圆角
none
small
medium
large
full
组件缩放90%95%100%105%110%

基本使用

多选

使用hideOptionWhenSelected属性可以隐藏已选择选项

过滤

自由输入

使用freeInput可以使输入框自由输入并生成新的选项,单选时生成的选项会展示在下拉列表中,多选时不会展示,而是在更新后对输入内容进行分词并生成新选项

常用按钮

多选时可通过commonButtons属性来配置常用按钮,支持的按钮有selectAll(全选), reverse(反选), clear(清除)

其可以设置为布尔值,若为 true 则展示全部按钮;也可以单独对每个按钮进行配置,支持 Button 的全部属性

选项分组

自定义选项字段

默认情况下options中的每一个option应为

ts
{ value: any; label?: string; children?: Option[] }

通过optionNameMap属性可重新映射这三个字段

无选项

函数式选项

不同颜色

不同大小

主题继承

select-option会继承select-optgroupselect的主题设置,优先从近

多选时,输入框中的 tag 会继承其对应select-option的主题设置

Popover属性

select直接依赖于popover实现,故popover支持的属性也可以直接传递给select,除了以下内部写死的

text
'open',
'content',
'popWidth',
'triggers',
'showArrow',
'children',
'toggleMode',
'useTransform',
'placement'

由于select-optionselect-optgroup依赖于dom结构来获取select context,而type="teleport"时它们被移动到别的位置,虽然目前做了兼容,但可能存在问题

而且type="teleport"时插槽均失效,你不可以直接在select下渲染选项,必须通过options属性,故不推荐select使用type="teleport"