Select 选择器
用于收纳大量选项的信息录入类组件。
代码演示
🎉 Features
V2.4.0
新增属性 filterable-to-placeholder 是否在可搜索时把已选值置为占位符 placeholder。
V2.4.3
新增属性 click-clear-filterable 是否在可搜索时点击尾部清除按钮把上一次的搜索结果置空。
V2.4.3
新增置顶插槽,可以使某些选项 置顶
。
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 |
clear-filterable | 是否在搜索、远程搜索下开启当当输入框失去焦点且搜索框值为空时清空上一次的搜索结果 | Boolean | — | false | v2.3.2 |
click-clear-filterable | 是否在搜索、远程搜索下开启当当输入框点击尾部清除按钮清空上一次的搜索结果 | Boolean | — | false | v2.4.3 |
select-on-press-enter | 是否在面板上开启回车选中 | Boolean | — | true | v2.3.6 |
silent-blur | 设置为 false 时,在 blur 事件中返回当前的 event 参数 | Boolean | — | true | v2.3.8 |
filterable-to-placeholder | 是否在可搜索时把已选值置为占位符 placeholder | Boolean | — | true | v2.4.0 |
maxlength | 可输入时的最大长度 | Number | — | 0 | V2.2.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-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | V2.3.6 |
Select Slots
name | 说明 | Version |
— | Option 组件列表 | |
prefix | Select 组件头部内容 | |
empty | 无选项时展示的内容 | v2.0.0 |
dropdown-header | 下拉框头部插槽 | v2.0.0 |
dropdown-footer | 下拉框底部插槽 | v2.0.0 |
top | 下拉框选项置顶 | v2.4.3 |
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 获取焦点 | — | |
上次更新: 5/7/2024, 10:13:58 AM