Select 选择器
当选项过多时，使用下拉菜单展示并选择内容。
提示
从 2.5.0 版本开始，el-select 的默认宽度改为 100%。当在行内表单中使用时，宽度将会收缩。为了正常显示宽度，你需要给 el-select 指定一个特定的宽度（例如：示例）。
基础用法
选项属性 2.10.5
禁用选项
禁用选择器
禁用整个组件。
可清空
你可以使用清除图标来清除选择器。
尺寸
基础多选
多选使用标签来显示选中的选项。
自定义模板
你可以为选项自定义 HTML 模板。
下拉列表的页眉 2.4.3
您可以自定义下拉列表的页眉。
下拉列表的页脚 2.4.3
您可以自定义下拉列表的页脚。
分组
将选项分组显示。
选项筛选
你可以筛选选项以找到所需的内容。
远程搜索
输入关键字，并从服务器获取数据。
创建新项目
创建并选择选择器选项中不包含的新项目
使用 value-key 属性
如果 Select 的绑定值是一个对象，请务必指定 value-key 作为其唯一标识的键名。
自定义标签 2.5.0
您可以自定义标签。
自定义加载 2.5.2
覆盖加载内容。
空值 2.7.0
如果您想支持空字符串，请将 empty-values 设置为 [null, undefined]。
如果要将清除值更改为 null，请将 value-on-clear 设置为 null。
自定义标签 2.7.4
您可以自定义标签。
Select API
Select 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean / object / array | — |
| multiple | 是否启用多选 | boolean | false |
| options 2.10.5 | 选项数据，其中 `value` 和 `label` 和 `disabled` 的键名可以通过 `props` 自定义 | array | — |
| props 2.10.5 | 配置选项 | object | — |
| disabled | 是否禁用 Select | boolean | false |
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | value |
| size | 输入框尺寸 | 枚举 | — |
| 可清空 | 是否可以清空选项 | boolean | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | false |
| collapse-tags-tooltip 2.3.0 | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，`collapse-tags` 属性必须设定为 true | boolean | false |
| multiple-limit | 当 `multiple` 为 `true` 时，用户可以选中的最大选项数。设为 0 表示无限制 | number | 0 |
| id | 原生输入框 id | string | — |
| 名称 | 选择器输入框的 name 属性 | string | — |
| effect | tooltip 主题，内置主题：`dark` / `light` | enum / string | light |
| 自动补全 | 选择器输入框的 autocomplete 属性 | string | off |
| 占位符 | 占位符，默认为 'Select' | string | — |
| filterable | 是否可筛选 | boolean | false |
| allow-create | 是否允许用户创建新项目， 需配合 `filterable` 使用 | boolean | false |
| filter-method | 自定义筛选方法，第一个参数是当前输入值。要使用此项，`filterable` 必须为 true | Function | — |
| remote | 选项是否从服务器加载 | boolean | false |
| debounce 防抖 2.11.7 | 远程搜索时的防抖延迟，单位为毫秒 | number | 300 |
| remote-method | 当输入值改变时调用的函数。 它的参数是当前的输入值。 若要使用此属性，`filterable` 必须为 true | Function | — |
| remote-show-suffix | 远程搜索方法中显示后缀图标 | boolean | false |
| 加载中 | 是否正在从远程获取数据 | boolean | false |
| loading-text | 远程加载时显示的文字，默认为 '加载中' | string | — |
| no-match-text | 搜索条件无匹配时显示的文字，也可以使用 `empty` 插槽，默认为 '无匹配数据' | string | — |
| no-data-text | 无选项时显示的文本，你也可以使用 `empty` 插槽，默认为 'No data' | string | — |
| popper-class | Select 的下拉菜单和标签工具提示的自定义类名 | string | '' |
| popper-style 2.11.0 | Select 的下拉菜单和标签工具提示的自定义样式 | string / object | — |
| reserve-keyword | 当 `multiple` 和 `filterable` 为 true 时，是否在选择一个选项后保留当前关键字 | boolean | true |
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | false |
| teleported | 是否将下拉列表元素插入到 `append-to` 设置的元素中 | boolean | true |
| append-to 2.8.4 | 下拉列表应该附加到哪个元素 | CSSSelector / HTMLElement | — |
| persistent | 当下拉列表不活动且 `persistent` 为 `false` 时，下拉列表将被销毁 | boolean | true |
| automatic-dropdown | 对于不可过滤的 Select 组件，此属性决定是否在输入框获得焦点后自动弹出选项菜单 | boolean | false |
| clear-icon | 自定义清除图标组件 | string / object | CircleClose |
| fit-input-width | 下拉框的宽度是否与输入框相同 | boolean | false |
| 后缀图标 | 自定义后缀图标组件 | string / object | ArrowDown |
| tag-type | 标签类型 | 枚举 | 信息 |
| tag-effect 2.7.7 | 标签效果 | 枚举 | light |
| validate-event | 是否触发表单验证 | boolean | true |
| offset 2.8.8 | 下拉列表的偏移量 | number | 12 |
| show-arrow 2.8.8 | 下拉列表是否带有箭头 | boolean | true |
| placement 2.2.17 | 下拉框出现的位置 | 枚举 | 下左 |
| fallback-placements 2.5.6 | 下拉菜单的可能位置列表 popper.js | array | ['bottom-start', 'top-start', 'right', 'left'] |
| max-collapse-tags 2.3.0 | 要显示的最大标签数。要使用此项，`collapse-tags` 必须为 true | number | 1 |
| popper-options | popper.js 参数 | object请参考 popper.js 文档 | {} |
| aria-label 无障碍 | 与原生输入框的 `aria-label` 相同 | string | — |
| empty-values 2.7.0 | 组件的空值，参见 config-provider | array | — |
| value-on-clear 2.7.0 | 清除返回值，参见 config-provider | string / number / boolean / Function | — |
| suffix-transition 已弃用 | 下拉菜单出现/消失时的图标动画 | boolean | true |
| tabindex 2.9.0 | 输入框的 tabindex | string / number | — |
警告
suffix-transition 已被弃用，并将在 2.4.0 版本中移除，请使用覆盖样式方案。
props
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 指定节点对象的哪个键用作节点的值 | string | value |
| label | 指定节点对象的哪个键用作节点的标签 | string | label |
| options 2.11.0 | 指定节点对象的哪个键用作节点的子节点 | string | options |
| disabled | 指定节点对象的哪个键用作节点的禁用 | string | disabled |
Select 事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当选中值改变时触发 | Function |
| visible-change | 下拉框出现/隐藏时触发 | Function |
| remove-tag | 多选模式下移除标签时触发 | Function |
| clear | 在可清空的 Select 组件上点击清除图标时触发 | Function |
| blur | 在 Input 失去焦点时触发 | Function |
| focus | 在 Input 获得焦点时触发 | Function |
| popup-scroll 2.9.4 | 下拉列表滚动时触发 | Function |
Select 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 选项组件列表 | Option Group / Option |
| header 2.4.3 | 下拉列表顶部的内容 | — |
| footer 2.4.3 | 下拉列表底部的内容 | — |
| prefix | 作为 Select 前缀的内容 | — |
| empty | 无选项时的内容 | — |
| tag 2.5.0 | Select 标签内容，subTags 的 `data`、`selectDisabled` 和 `deleteTag` 在 2.10.3 中引入 | object |
| loading 2.5.2 | Select 加载中的内容 | — |
| label 2.7.4 | 作为 Select 标签的内容。`index` 在 2.11.2 版本中引入 | object |
Select 暴露的实例
| 名称 | 描述 | 类型 |
|---|---|---|
| focus | 使输入框获取焦点 | Function |
| blur | 使输入框失去焦点，并隐藏下拉框 | Function |
| selectedLabel 2.8.5 | 获取当前选中的标签 | object |
Option Group API
Option Group 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 分组的名称 | string | — |
| disabled | 是否禁用该分组下的所有选项 | boolean | false |
Option Group 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Option |
Option API
Option 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 选项的值 | string / number / boolean / object | — |
| label | 选项的标签，如果省略则与 `value` 相同 | string / number | — |
| disabled | 选项是否被禁用 | boolean | false |
Option 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
来源
贡献者
