Select 下拉选择框
规则
基础示例
Props 配置示例
单选下拉框
多选下拉框
可搜索下拉框
远程搜索（模拟接口，hook + updateRule）
某项禁用（不可选）
整框禁用
尺寸对比（小 / 默认 / 大）
限制多选数量
Events 事件示例
监听选择变化和焦点事件
选择后联动更新其他字段
多选模式下移除标签
Slots 插槽示例
自定义空数据提示
完整配置项:Element_Select
value :Number | String | Array
Options
| 字段名 | 说明 | 字段类型 | 是否必填 | 默认值 |
|---|---|---|---|---|
| value | 参数值 | String,Number | true | - |
| label | 字段别名 | String | true | - |
| disabled | 设置为禁用状态 | Boolean | false | false |
Props
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| multiple | 是否多选 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | value |
| size | 输入框尺寸 | enum | — |
| clearable | 是否可以清空选项 | boolean | false |
| collapseTags | 多选时是否将选中值按文字的形式展示 | boolean | false |
| collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true | boolean | false |
| multipleLimit | multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制 | number | 0 |
| name | Select 输入框的原生 name 属性 | string | — |
| effect | tooltip 主题，内置了 dark / light 两种 | enum / string | light |
| autocomplete | Select 输入框的原生 autocomplete 属性 | string | off |
| placeholder | 占位符，默认为“Select” | string | — |
| filterable | Select 组件是否可筛选 | boolean | false |
| allowCreate | 是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。 | boolean | false |
| filterMethod | 自定义筛选方法 | Function | — |
| remote | 其中的选项是否从服务器远程加载 | boolean | false |
| remoteMethod | 自定义远程搜索方法 | Function | — |
| remoteShowSuffix | 远程搜索方法显示后缀图标 | boolean | false |
| loading | 是否正在从远程获取数据 | boolean | false |
| loadingText | 从服务器加载数据时显示的文本，默认为“Loading” | string | — |
| noMatchText | 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” | string | — |
| noDataText | 无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data” | string | — |
| popperClass | 选择器下拉菜单的自定义类名 | string | '' |
| reserveKeyword | 当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词 | boolean | true |
| defaultFirstOption | 是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用 | boolean | false |
| teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | boolean | true |
| appendTo | 下拉框挂载到哪个 DOM 元素 | CSSSelector / HTMLElement | — |
| persistent | 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 | boolean | true |
| automaticDropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | false |
| clearIcon | 自定义清除图标 | string / object | CircleClose |
| fitInputWidth | 下拉框的宽度是否与输入框相同 | boolean | false |
| suffixIcon | 自定义后缀图标组件 | string / object | ArrowDown |
| tagType | 标签类型 | enum | info |
| tagEffect | 标签效果 | enum | light |
| validateEvent | 是否触发表单验证 | boolean | true |
| offset | 下拉面板偏移量 | number | 12 |
| showArrow | 下拉菜单的内容是否有箭头 | boolean | true |
| placement | 下拉框出现的位置 | enum | bottom-start |
| fallbackPlacements | dropdown 可用的 positions 请查看popper.js 文档 | array | ['bottom-start', 'top-start', 'right', 'left'] |
| maxCollapseTags | 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 | number | 1 |
| popperOptions | popper.js 参数 | objectrefer to popper.js doc | {} |
| ariaLabel | 等价于原生 input aria-label 属性 | string | — |
| emptyValues | 组件的空值配置 参考config-provider | array | — |
| valueOnClear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — |
| tabindex | input 的 tabindex | string / number | — |
Events
| 事件名 | 说明 | Type |
|---|---|---|
| change | 选中值发生变化时触发 | Function |
| visible-change | 下拉框出现/隐藏时触发 | Function |
| remove-tag | 多选模式下移除tag时触发 | Function |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | Function |
| blur | 当 input 失去焦点时触发 | Function |
| focus | 当 input 获得焦点时触发 | Function |
| popup-scroll 2.9.4 | 下拉滚动时触发 | Function |
Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | option 组件列表 | Option Group / Option |
| header 2.4.3 | 下拉列表顶部的内容 | — |
| footer 2.4.3 | 下拉列表底部的内容 | — |
| prefix | Select 组件头部内容 | — |
| empty | 无选项时的列表 | — |
| tag 2.5.0 | select 组件自定义标签内容 | — |
| loading 2.5.2 | select 组件自定义 loading内容 | — |
| label 2.7.4 | select 组件自定义标签内容 | — |