Select 选择器 ​当选项过多时，使用下拉菜单展示并选择内容。

TIP

在版本 2.5.0之后， el-select 的默认宽度更改为 100% 当使用内联形式时，宽度将显示异常。 为了保持显示正常, 您需要手动配置 el-select 的宽度 (如: 例子).

基础用法 ​适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值

Selectvue

隐藏源代码有禁用选项 ​在 el-option 中，设定 disabled 值为 true，即可禁用该选项

Selectvue

隐藏源代码禁用状态 ​禁用整个选择器组件

为 el-select 设置 disabled属性，则整个选择器不可用。

Selectvue

隐藏源代码可清空单选 ​您可以使用清除图标来清除选择。

为 el-select 设置 clearable 属性，则可将选择器清空。 需要注意的是，clearable 属性仅适用于单选。

Selectvue

隐藏源代码尺寸 ​使用 size 属性改变选择器大小。 除了默认大小外，还有另外两个选项： large, small。

SelectSelectSelectvue

隐藏源代码基础多选 ​多选选择器使用 tag 组件来展示已选中的选项。

为 el-select 设置 multiple 属性即可启用多选， 此时 v-model 的值为当前选中值所组成的数组。 默认情况下选中值会以 Tag 组件的形式展现， 你也可以设置 collapse-tags 属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

default

Selectuse collapse-tags

Selectuse collapse-tags-tooltip

Selectuse max-collapse-tags

Selectvue

隐藏源代码自定义模板 ​你可以自定义如何来渲染每一个选项。

将自定义的 HTML 模板插入 el-option 的 slot 中即可。

Selectvue

隐藏源代码自定义下拉菜单的头部 2.4.3 ​您可以自定义下拉菜单的头部。

使用slot 自定义内容

Selectvue

隐藏源代码自定义下拉菜单的底部 2.4.3 ​您可以自定义下拉菜单的底部。

使用slot 自定义内容

Selectvue

隐藏源代码将选项进行分组 ​你可以为选项进行分组来区分不同的选项

使用 el-option-group 对备选项进行分组，它的 label 属性为分组名

Selectvue

隐藏源代码筛选选项 ​可以利用筛选功能快速查找选项。

为el-select添加filterable属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

Selectvue

隐藏源代码远程搜索 ​输入关键字以从远程服务器中查找数据。

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。 remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。 需要注意的是，如果 el-option 是通过 v-for 指令渲染出来的，此时需要为 el-option 添加 key 属性， 且其值需具有唯一性，比如这个例子中的 item.value。

default

Please enter a keyworduse remote-show-suffix

Please enter a keywordvue

隐藏源代码创建新的选项 ​创建并选中未包含在初始选项中的条目。

通过使用 allow-create 属性，用户可以通过输入框创建新项目。 为了使 allow-create 正常工作， filterable 的值必须为 true。 本例还使用了 default-first-option 属性， 在该属性为 true 的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

Choose tags for your articlevue

隐藏源代码使用值键 value-key 属性 ​如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

通过使用 value-key 属性，可以正确处理带有重复label的数据。 这样虽然label 是重复的，但任可通过 id 来确认唯一性。

Select selected option's description: no select

vue

隐藏源代码自定义标签 2.5.0 ​您可以自定义标签。

将自定义的标签插入 el-select 的 slot 中即可。 collapse-tags, collapse-tags-tooltip, max-collapse-tags 在此模式下不生效.

vue

隐藏源代码自定义加载 2.5.2 ​修改加载区域内容

loading icon1

Please enter a keywordloading icon2

Please enter a keywordvue

隐藏源代码空值配置2.7.0 ​若想配置如空字符串为有效值而不是空值，可以配置 empty-values 为 [null, undefined].

如果您想要将清空值更改为 null, 请设置 value-on-clear 为 null

vue

隐藏源代码自定义标签 2.7.4 ​您可以自定义标签

: Option1vue

隐藏源代码Select API ​Select Attributes ​属性名说明类型Defaultmodel-value / v-model选中项绑定值string / number / boolean / object / array—multiple是否多选booleanfalsedisabled是否禁用booleanfalsevalue-key作为 value 唯一标识的键名，绑定值为对象类型时必填stringvaluesize输入框尺寸enum—clearable是否可以清空选项booleanfalsecollapse-tags多选时是否将选中值按文字的形式展示booleanfalsecollapse-tags-tooltip 2.3.0当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 truebooleanfalsemultiple-limitmultiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制number0nameSelect 输入框的原生 name 属性string—effecttooltip 主题，内置了 dark / light 两种enum / stringlightautocompleteSelect 输入框的原生 autocomplete 属性stringoffplaceholder占位符，默认为“Select”string—filterableSelect 组件是否可筛选booleanfalseallow-create是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。booleanfalsefilter-method自定义筛选方法Function—remote其中的选项是否从服务器远程加载booleanfalseremote-method自定义远程搜索方法Function—remote-show-suffix远程搜索方法显示后缀图标booleanfalseloading是否正在从远程获取数据booleanfalseloading-text从服务器加载数据时显示的文本，默认为“Loading”string—no-match-text搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'”string—no-data-text无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data”string—popper-class选择器下拉菜单的自定义类名string''reserve-keyword当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词booleantruedefault-first-option是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用booleanfalseteleported是否使用 teleport。设置成 true则会被追加到 append-to 的位置booleantrueappend-to 2.8.4下拉框挂载到哪个 DOM 元素CSSSelector / HTMLElement—persistent当下拉选择器未被激活并且persistent设置为false，选择器会被删除。booleantrueautomatic-dropdown对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单booleanfalseclear-icon自定义清除图标string / objectCircleClosefit-input-width下拉框的宽度是否与输入框相同booleanfalsesuffix-icon自定义后缀图标组件string / objectArrowDowntag-type标签类型enuminfotag-effect 2.7.7标签效果enumlightvalidate-event是否触发表单验证booleantrueoffset 2.8.8下拉面板偏移量number12show-arrow 2.8.8下拉菜单的内容是否有箭头booleantrueplacement 2.2.17下拉框出现的位置enumbottom-startfallback-placements 2.5.6dropdown 可用的 positions 请查看popper.js 文档array['bottom-start', 'top-start', 'right', 'left']max-collapse-tags 2.3.0需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1popper-optionspopper.js 参数objectrefer to popper.js doc{}aria-label a11y等价于原生 input aria-label 属性string—empty-values 2.7.0组件的空值配置 参考config-providerarray—value-on-clear 2.7.0清空选项的值 参考 config-providerstring / number / boolean / Function—suffix-transition deprecated下拉菜单显示/消失时后缀图标的动画booleantruetabindex 2.9.0input 的 tabindexstring / number—WARNING

suffix-transition 已被 弃用, 并 将会 在2.4.0中删除, 请使用覆盖样式方案。

Select Events ​事件名说明Typechange选中值发生变化时触发Functionvisible-change下拉框出现/隐藏时触发Functionremove-tag多选模式下移除tag时触发Functionclear可清空的单选模式下用户点击清空按钮时触发Functionblur当 input 失去焦点时触发Functionfocus当 input 获得焦点时触发Functionpopup-scroll 2.9.4下拉滚动时触发FunctionSelect Slots ​插槽名说明子标签defaultoption 组件列表Option Group / Optionheader 2.4.3下拉列表顶部的内容—footer 2.4.3下拉列表底部的内容—prefixSelect 组件头部内容—empty无选项时的列表—tag 2.5.0作为 Select 组件的内容时，子标签 data、selectDisabled 和 deleteTag 是在版本 2.10.3 中新增的。objectloading 2.5.2select 组件自定义 loading内容—label 2.7.4select 组件自定义标签内容—Select Exposes ​插槽名说明类型focus使选择器的输入框获取焦点Functionblur使选择器的输入框失去焦点，并隐藏下拉框FunctionselectedLabel 2.8.5获取当前选中的标签objectOption Group API ​Option Group Attributes ​属性名说明TypeDefaultlabel分组的名称string—disabled是否将该分组下所有选项置为禁用booleanfalseOption Group Slots ​属性名说明Subtagsdefault自定义默认内容OptionOption API ​Option Attributes ​名称详情类型默认value选项的值string / number / boolean / object—label选项的标签，若不设置则默认与value相同string / number—disabled是否禁用该选项booleanfalseOption Slots ​名称说明default默认插槽内容源代码 ​组件 • 样式 • 文档

贡献者 ​