# Select 选择器
用于收纳大量选项的信息录入类组件。
# 代码演示
# API
# Select Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
---|---|---|---|---|---|
allow-create | 是否允许用户创建新条目,需配合 filterable 使用 | Boolean | — | false | |
autocomplete | select 中输入框的 autocomplete 属性 | String | — | — | |
automatic-dropdown | 对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单 | Boolean | — | false | |
clearable | 是否可以清空选项 | Boolean | — | false | |
collapse-tags | 多选时是否将选中值按文字的形式展示 | Boolean | — | false | |
disabled | 是否禁用 | Boolean | — | false | |
default-first-option | 在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用 | Boolean | — | false | |
filterable | 是否可搜索 | Boolean | — | false | |
filter-method | 自定义搜索方法 | Function | — | — | |
loading | 是否正在从远程获取数据 | Boolean | — | false | |
loading-text | 远程加载时显示的文字 | String | — | 加载中 | |
multiple | 是否多选 | Boolean | — | false | |
show-checkbox | 多选模式下配置复选框和全选功能 | Boolean | — | - | V2.2.10 |
multiple-limit | 多选时用户最多可以选择的项目数,为 0 则不限制 | Number | — | 0 | |
name | select 中输入框的 name 属性 | String | — | — | |
no-match-text | 搜索条件无匹配时显示的文字 | String | — | 无匹配数据 | |
no-data-text | 选项为空时显示的文字 | String | — | 无数据 | |
placeholder | 占位符 | String | — | 请选择 | |
popper-class | Select 下拉框的类名 | String | — | — | |
popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false | Boolean | — | true | |
remote | 是否为远程搜索 | Boolean | — | false | |
remote-method | 远程搜索方法 | Function | — | — | |
reserve-keyword | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | Boolean | — | false | |
size | 输入框尺寸 | String | 'medium' | 'small' | 'mini' | — | |
show-folded-tags | 是否开启气泡展示折叠选项的功能 | Boolean | — | true | v1.7.5 |
tags-threshold | 开启多选且折叠标签时,超过该阈值的选项将被折叠 | Number | — | 1 | v1.7.0 |
value / v-model | 绑定值 | String | Number | Boolean | Object | — | — | |
value-key | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | String | — | value | |
draggable-tag | 开启 multiple 且不合并情况下可以配置拖拽已选中 tag 顺序 | Boolean | true/false | - | v2.2.9 |
mode | 分组模式(横向分组模式仅在单选情况下有效) | String | 'vertical' | 'vertical' | 'horizontal' | V2.2.10 |
suffix-icon | 自定义尾部图标的类名(此时尾部禁止点击打开面板) | String | — | V2.3.1 |
# Select Events
事件名称 | 说明 | 回调参数 | Version |
---|---|---|---|
blur | 当 input 失去焦点时触发 | (event: Event) | |
change | 选中值发生变化时触发 | 目前的选中值 | |
clear | 可清空的单选模式下用户点击清空按钮时触发 | — | |
focus | 当 input 获得焦点时触发 | (event: Event) | |
remove-tag | 多选模式下移除 tag 时触发 | 移除的 tag 值 | |
visible-change | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false | |
tag-drag-start | tag 开始拖拽时触发的事件 | event | V2.2.9 |
tag-drag-end | tag 拖拽结束时触发的事件 | event、绑定值 | V2.2.9 |
# Select Slots
name | 说明 | Version |
---|---|---|
— | Option 组件列表 | |
prefix | Select 组件头部内容 | |
empty | 无选项时展示的内容 | v2.0.0 |
dropdown-header | 下拉框头部插槽 | v2.0.0 |
dropdown-footer | 下拉框底部插槽 | v2.0.0 |
# Option Group Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
---|---|---|---|---|---|
disabled | 是否将该分组下所有选项置为禁用 | Boolean | — | false | |
label | 分组的组名 | String | — | — |
# Option Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
---|---|---|---|---|---|
disabled | 是否禁用该选项 | Boolean | — | false | |
label | 选项的标签,若不设置则默认与 value 相同 | String | Number | — | — | |
value | 选项的值 | String | Number | Object | — | — |
# Methods
方法名 | 说明 | 参数 | Version |
---|---|---|---|
blur | 使 input 失去焦点,并隐藏下拉框 | — | |
focus | 使 input 获取焦点 | — |