Select 选择器

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

基础用法

有禁用选项

禁用状态

禁用整个选择器组件

可清空单选

包含清空按钮，可将选择器清空为初始状态

基础多选

适用性较广的基础多选，用 Tag 展示已选项

自定义模板

你可以自定义单个选项怎么被渲染

将选项进行分组

你可以为选项进行分组来区分不同的选项

筛选选项

可以利用筛选功能快速查找选项

远程搜索

通过输入关键字在服务器上来搜索数据

创建新的选项

可以创建并选中选项中不存在的条目

TIP

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

Select 属性

属性	说明	类型	可选值	默认值
model-value / v-model	选中项绑定值	string / number / boolean / object	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	large/default/small	default
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
collapse-tags-tooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，`collapse-tags`属性必须设定为 true	boolean	true / false	false
multiple-limit	`multiple` 属性设置为 `true` 时，代表多选场景下用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	Select 输入框的原生 name 属性	string	—	—
effect	Tooltip 主题，内置了 `dark` / `light` 两种	string	string	light
autocomplete	Select 输入框的原生 autocomplete 属性	string	—	off
placeholder	占位文字	string	—	Select
filterable	Select 组件是否可筛选	boolean	—	false
allow-create	是否允许用户创建新条目，只有当 `filterable` 设置为 true 时才会生效。	boolean	—	false
filter-method	自定义筛选方法	function	—	—
remote	其中的选项是否从服务器远程加载	boolean	—	false
remote-method	自定义远程搜索方法	function	—	—
loading	Select 组件是否从远程加载数据	boolean	—	false
loading-text	从服务器加载内容时显示的文本	string	—	Loading
no-match-text	搜索条件无匹配时显示的文字，也可以使用 `empty` 插槽设置	string	—	No matching data
no-data-text	displayed text when there is no options, you can also use slot `empty`	string	—	No data
popper-class	Select 下拉框的自定义类名	string	—	—
reserve-keyword	when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option	boolean	—	true
default-first-option	是否在输入框按下回车时，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用	boolean	-	false
popper-append-to-body(deprecated)	whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false	boolean	-	true
teleported	whether select dropdown is teleported to the body	boolean	true / false	true
persistent	when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed	boolean	true / false	true
automatic-dropdown	for non-filterable Select, this prop decides if the option menu pops up when the input is focused	boolean	-	false
clear-icon	自定义清除图标组件	string / Component	—	CircleClose
fit-input-width	下拉框的宽度是否与输入框相同	boolean	—	false
suffix-icon	自定义后缀图标组件	string / Component	—	ArrowUp
tag-type	标签类型	string	success/info/warning/danger	info

Select 事件

事件名	说明	回调参数
change	选中值发生变化时触发	val，目前的选中值
visible-change	下拉框出现/隐藏时触发	val，出现则为 true，隐藏则为 false
remove-tag	多选模式下移除 tag 时触发	val，移除的 tag 值
clear	可清空的单选模式下用户点击清空按钮时触发	—
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)

Select 插槽

插槽名	说明	子标签
—	Option 组件列表	Option Group / Option
prefix	Select 组件头部内容	—
empty	无选项时的列表	—

Option Group 属性

属性	说明	类型	可选值	默认值
label	分组的组名	string	—	—
disabled	是否将该分组下所有选项置为禁用	boolean	—	false

Option Group 插槽

插槽名	说明	子标签
-	自定义默认内容	Option

Option 属性

属性	说明	类型	可选值	默认值
value	选项的值	string / number / boolean / object	—	—
label	选项的标签，若不设置则默认与`value`相同	string/number	—	—
disabled	是否禁用该选项	boolean	—	false

Option 插槽

插槽名	说明
—	默认插槽

Select 方法

方法名	说明	参数
focus	使选择器的输入框获取焦点	-
blur	使选择器的输入框失去焦点，并隐藏下拉框	-

Rate 评分

Virtualized Select 虚拟化选择器

Select 选择器 #

基础用法 #

有禁用选项 #

禁用状态 #

可清空单选 #

基础多选 #

自定义模板 #

将选项进行分组 #

筛选选项 #

远程搜索 #

创建新的选项 #

Select 属性 #

Select 事件 #

Select 插槽 #

Option Group 属性 #

Option Group 插槽 #

Option 属性 #

Option 插槽 #

Select 方法 #