Skip to content

Select 选择器

下拉选择器,支持单选、多选、分组、可清空、远程搜索与自定义创建,键盘可操作。

单选

单选

预设值

预设值(value)

多选

多选(multiple)

多选时 value 为 JSON 数组,选中项以标签展示,可单独移除;标签默认换行展示、触发器随内容增高(不设置 max-tag-count 时不会折叠)。

禁用

禁用

空态

无数据

选项为空时下拉显示「暂无数据」。

可搜索

可搜索(searchable)

打开下拉后可直接输入过滤,无匹配时显示「无匹配选项」。

分组

分组(group)

分组多选

选项带 group 字段时按组渲染组标题(不可选),组内选项缩进;键盘 / 跨组连续导航。

可清空

可清空(clearable)

有选中值时显示清空按钮,点击清空值并派发 oas-clearoas-change

远程搜索

远程搜索(remote + loading)

remote 模式下组件不做本地过滤,输入派发 oas-input 供宿主请求;请求期间由宿主置 loading 显示加载占位。示例中模拟 800ms 延迟过滤:

远程加载占位

标签折叠

标签折叠(max-tag-count)

多选标签默认换行展示、不折叠;仅显式设置 max-tag-count 时按数量折叠为 +N(悬浮显示剩余项)。

允许创建

允许创建(allow-create)

搜索无匹配时显示「创建 xxx」项,点击或回车后以输入值创建新选项并纳入选中。

事件

变化事件

监听 oas-changedetail.value 单选为字符串、多选为数组:

API

属性

属性说明类型默认值
allow-create无匹配时允许以输入值创建新选项boolean
clearable可清空(有值时显示清空按钮,清空派发 oas-clearboolean
disabled禁用boolean
loading远程加载占位(与 remote 搭配使用)boolean
max-tag-count多选标签按数量折叠为 +N(需显式设置;未设置时标签默认换行展示,不折叠)boolean
multiple多选boolean
options选项,JSON 数组 [{ label, value, disabled?, group? }]Option[] | string[]
placeholder占位提示
remote远程搜索:不做本地过滤,输入派发 oas-input 供宿主请求boolean
searchable可搜索(打开下拉后输入过滤)boolean
value当前值(多选为 JSON 数组)

事件

事件说明
oas-change选择/清空变化,detail: { value }
oas-clear点击清空按钮,detail: { value }(清空前的值)
oas-inputremote 模式输入,detail: { value }(供宿主请求)

options 中带 group 字段的选项按组渲染组标题(不可选),组内选项缩进;键盘导航跨组连续。

键盘:Enter / 展开,/ 移动高亮(搜索框内同样可用),Enter 选中,Esc 关闭。