# 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
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
keywords	在单选时且有选中值时设置敏感词高亮	Array	—	-	V2.4.6
overflow-height	最大高度，合法的值为数字或者单位为 px 的高度。	String / Number	—	-	V2.4.9
show-pagination	是否开启分页	Boolean	—	false	v2.4.11
pagination-options	分页配置项	Object	—	-	v2.4.11
remote-always-dropdown	远程搜索时无数据是否强制显示面板	Boolean	—	false	v2.4.16
allow-create-blur	是否允许用户在输入完失去焦点时创建新条目，需配合 allow-create filterable 使用	Boolean	—	false	V2.4.16
tight	是否使用紧凑版	Boolean	—	false	V2.4.17
tight-column	紧凑版布局每行显示列数据	Number	—	7	V2.4.17
tight-width	紧凑版布局下面板宽度	Number	—	320	V2.4.17
solid-icon	设置后缀图标是否是实心	Boolean	—	false	V2.4.17
long	设置选择器宽度随着容器宽度进行适配	Boolean	—	false	V2.4.24
filterable-placeholder	在面板中配置搜索时输入框占位符	String	—	-	V2.4.25
reset-value-pagination	分页切换时是否重置 value	Boolean	—	true	V2.4.30
show-check-all-on-pagination	强制显示全选 value	Boolean	—	false	V2.4.30
reset-filter-value-on-pagination	分页且可搜索时，是否在切换分页时重置搜索值（单选）	Boolean	—	true	V2.4.31

# Pagination-options Attributes

参数	说明	类型	可选值	默认值	Version
currentPage	当前第几页	Number	—	1	v2.4.11
pageSize	每页显示个数	Number	—	6	v2.4.11
pageCount	设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠	Number	—	5	v2.4.11
total	总数	Number	—	0	v2.4.11
bind	继承 w-pagination 的属性	Object	—	-	v2.4.11

# 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	—	—
closable-tag	是否在多选已选值设置是否可以删除	Boolean	—	true	V2.4.16

# Methods

方法名	说明	参数	Version
blur	使 input 失去焦点，并隐藏下拉框	—
focus	使 input 获取焦点	—

# 常见问题

• 1、为什么在开启 filterable 和 filter-method 之后输入搜索值时会被莫名其妙的清空？

检查一下 Option 组件，是否使用了 index 作为 key，改成 value 作为 key。 因为 Vue 是使用 key 来决定是否渲染元素的，如果 key 是一样的，就会复用，不一样就会重新渲染。

例如：在输入框中输入 “1” 之后获取的最新数据和原数据对比，Vue 认为和没输入时的 index = 0 是一样的，组件会复用。但是因为 Option 的 value 不一样，导致触发了 value 的 watch。也就是触发了 Select 组件的 setSelected 的方法。 此时 this.value 是空字符串，导致 this.selectedLabel 也是空字符串。导致输入框的 value 被清空了。（对此有疑问的可以联系开发者）

• 2、如何解决「搜索」「远程搜索」下当输入框失去焦点且搜索框值为空时会保留上一次的搜索结果？