Select 选择器
下拉选择器,支持单选、多选、分组、可清空、远程搜索与自定义创建,键盘可操作。
单选
单选
预设值
预设值(value)
多选
多选(multiple)
多选时 value 为 JSON 数组,选中项以标签展示,可单独移除;标签默认换行展示、触发器随内容增高(不设置 max-tag-count 时不会折叠)。
禁用
禁用
空态
无数据
选项为空时下拉显示「暂无数据」。
可搜索
可搜索(searchable)
打开下拉后可直接输入过滤,无匹配时显示「无匹配选项」。
分组
分组(group)
分组多选
选项带 group 字段时按组渲染组标题(不可选),组内选项缩进;键盘 ↑/↓ 跨组连续导航。
可清空
可清空(clearable)
有选中值时显示清空按钮,点击清空值并派发 oas-clear 与 oas-change。
远程搜索
远程搜索(remote + loading)
remote 模式下组件不做本地过滤,输入派发 oas-input 供宿主请求;请求期间由宿主置 loading 显示加载占位。示例中模拟 800ms 延迟过滤:
远程加载占位
标签折叠
标签折叠(max-tag-count)
多选标签默认换行展示、不折叠;仅显式设置 max-tag-count 时按数量折叠为 +N(悬浮显示剩余项)。
允许创建
允许创建(allow-create)
搜索无匹配时显示「创建 xxx」项,点击或回车后以输入值创建新选项并纳入选中。
事件
变化事件
监听 oas-change,detail.value 单选为字符串、多选为数组:
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
allow-create | 无匹配时允许以输入值创建新选项 | boolean | — |
clearable | 可清空(有值时显示清空按钮,清空派发 oas-clear) | boolean | — |
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-input | remote 模式输入,detail: { value }(供宿主请求) |
options中带group字段的选项按组渲染组标题(不可选),组内选项缩进;键盘导航跨组连续。
键盘:Enter / ↓ 展开,↑/↓ 移动高亮(搜索框内同样可用),Enter 选中,Esc 关闭。