Select 选择器
移动端:下拉 popper 改为底部选择面板,参见 移动端 · 数据录入。
下拉选择控件:Option 挂载时向 Select 注册,支持单选 / 多选、可搜索与自定义过滤、远程搜索、允许创建、折叠标签、选项分组与键盘导航(上下键高亮、Enter 选中、Esc 关闭、Backspace 删除多选末项)。
基础用法
单选时绑定值为选中项的 value;clearable 默认关闭,开启后有选中值时展示清空按钮,单选点击清空为空串、多选清空为空数组,并触发 clear 事件。
多选与折叠标签
multiple 时绑定值为数组,选中项以可关闭的 tag 呈现,选择后下拉保持打开;collapse-tags 只展示前 max-collapse-tags 个 tag(默认 1),其余折叠为 + N 计数,避免撑高筛选区。
选中数上限
max-count 限定多选最多可选中数量:达到上限后其余选项呈置灰态、点击被拦截,已选标签可照常移除,移除后立即恢复可选;0 表示不限。
可搜索
filterable 开启后可在输入框中按 label 关键字过滤选项;需要按拼音、编码等自定义规则过滤时传 filter-method((query, option) => boolean 返回是否保留)。
允许创建
allow-create 配合 filterable:搜索无匹配项时把当前输入作为临时选项出现在下拉首位,回车选中后写入绑定值,适合标签、备注类自由输入。
远程搜索
remote 声明远程模式:键入时调用 remote-method(query) 拉取选项(示例做了 400ms 防抖),loading 期间下拉展示加载文案,常用于大数据量字典搜索。
数据模式与虚拟滚动
传 options 数组即进入数据模式:无需手写 eb-option,下拉由组件直接渲染;再叠加 virtual 开启虚拟滚动——万级选项只渲染可视窗口,滚动、键盘、过滤全程流畅。
选项分组
eb-option-group 以 label 作为分组标题,把选项按业务维度归组,长列表更易扫读。
对象值形态
label-in-value 开启后绑定值形如 { value, label }(multiple 时为对象数组),业务侧免于二次反查文案;回显同时兼容基础值与对象两种形态,清空仍回落为空串 / 空数组。
下拉面板自定义区块
popup-render 插槽在选项列表之后、下拉面板底部追加自定义区块(对齐 antd 的 dropdownRender 语义),常用于「+ 新增」一类入口;点击区块内元素默认不会关闭下拉。
尺寸与禁用
size 支持 large / small;disabled 禁用整个选择器,单个 option 设置 disabled 则该项不可选(呈置灰态)。
API
Select Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值,多选时为选中 value 数组;label-in-value 下形如 { value, label } | string | number | boolean | array | object | |
| multiple | 多选,绑定值为数组且选择后下拉保持打开 | boolean | false |
| disabled | 禁用(同时响应表单禁用态) | boolean | false |
| size | 尺寸,支持 large / small | string | |
| clearable | 可清空,单选有值或多选非空数组时展示清空按钮 | boolean | false |
| placeholder | 占位文本(缺省取语言包默认文案) | string | |
| filterable | 可搜索,键入关键字按 label 过滤选项 | boolean | false |
| filter-method | 自定义过滤函数,返回 true 保留该选项 | (query, option) => boolean | null |
| remote | 远程搜索模式,过滤交给 remote-method | boolean | false |
| remote-method | 远程搜索方法,键入时以当前关键字调用 | (query: string) => void | null |
| loading | 加载中,下拉展示加载文案 | boolean | false |
| allow-create | 允许创建无匹配的新选项(需配合 filterable) | boolean | false |
| collapse-tags | 多选时折叠超出数量的 tag | boolean | false |
| max-collapse-tags | 折叠模式下展示的 tag 数上限,其余折叠为 + N | number | 1 |
| collapse-tags-tooltip | 预留参数(当前版本未启用) | boolean | false |
| label-in-value | 选中值形如 { value, label }(multiple 为对象数组);回显兼容基础值与对象两种形态,清空仍为空串 / 空数组 | boolean | false |
| max-count | 多选选中数上限,达上限后其余选项置灰且点击被拦截,已选标签可照常移除;0 表示不限 | number | 0 |
| options | 数据模式选项数组,传入后下拉由组件渲染,无需手写 option;字段名可用 field-names 重映射 | { value, label?, disabled? }[] | null |
| field-names | 数据模式字段映射 { label, value, disabled },默认取同名字段,与 Cascader / Tree 的 props 映射能力对齐 | object | null |
| virtual | 虚拟滚动(需配合 options),万级选项只渲染可视窗口 | boolean | false |
| name | 原生 name 属性 | string | — |
| ripple | 激活涟漪动效开关:聚焦时实体色影向内收拢消散;也可在 Form 上批量关闭或全局 setRipple(false) | boolean | true |
Select Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue / change | 选中值变化(选择、移除 tag、清空、Backspace 均触发;label-in-value 时负载形如 { value, label }) | (value) => void | — |
| clear | 点击清空按钮 | () => void | — |
| visible-change | 下拉展开 / 收起 | (visible: boolean) => void | — |
| remove-tag | 多选移除某一选中项(tag 关闭或再次点击已选项) | (value) => void | — |
| filter-change | 搜索关键字变化 | (query: string) => void | — |
| blur | 焦点真离开组件时触发(Esc 关闭下拉但焦点仍在触发器上不触发) | () => void | — |
| focus | 组件获得焦点时触发(含展开下拉时聚焦输入框 / 触发器) | () => void | — |
Select Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| popup-render | 下拉面板底部自定义区块(对齐 antd dropdownRender),在选项列表之后渲染;点击区块内元素默认不关闭下拉 | — | — |
Select Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focus | filterable 时聚焦搜索输入框,否则打开下拉 | () => void | — |
| blur | 收起下拉并使触发器失焦(焦点离开时触发 blur 事件) | () => void | — |
| toggleDropdown | 切换下拉展开 / 收起 | () => void | — |
| clearSelection | 清空选中值 | () => void | — |
| updateDropdown | 手动刷新下拉浮层定位 | () => void | — |
Option Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 选项值(必填) | string | number | boolean | — |
| label | 选项显示文案,缺省显示 String(value) | string | number | |
| disabled | 该项不可选 | boolean | false |
Option Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 自定义选项内容(如图标 + 文案),缺省显示 label | — | — |
OptionGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 分组标题文案 | string | |
| disabled | 分组禁用(预留声明,禁用请设置在 option 上) | boolean | false |
移动端适配
容器环境为 mobile 时(优先级:ConfigProvider platform > 全局 setPlatform() > 自动探测:视口 ≤ 768px 或触屏设备),选择器不再渲染浮动下拉,而是底部弹出选择面板(带遮罩、圆角、安全区适配),点选即回填并关闭;桌面环境保持原形态。下方演示通过 platform="mobile" 强制移动形态(无论当前设备):