Select 选择器

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

基础用法

适用广泛的基础单选

禁用状态

选择器不可用状态

有禁用选项

可清空单选

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

基础多选

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

自定义模板

可以自定义 Option 的显示内容

分组

选项可以进行分组

筛选

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

独有功能：Grid 模式 (Grid Mode)

不同于传统的列表展示，Grid 模式允许你以网格形式展示选项，非常适合图标选择、颜色选择等场景。

允许你在下拉菜单的顶部和底部添加自定义内容，例如添加一个“新建”按钮或操作提示。

API

Select Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值	string / number / boolean / object	—
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
clearable	是否可以清空选项	boolean	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	false
placeholder	占位符	string	请选择
filterable	是否可搜索	boolean	false
loading	是否正在从远程获取数据	boolean	false
loading-text	远程加载时显示的文字	string	Loading
no-match-text	搜索条件无匹配时显示的文字	string	No matching data
no-data-text	选项为空时显示的文字	string	No data
mode	(独有) 模式，可选值: `default` / `grid`	string	default
grid-cols	(独有) Grid 模式下的列数	number	4

Select Events

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

Select Slots

插槽名	说明
-	Option 组件列表
header	(独有) 下拉菜单顶部内容
footer	(独有) 下拉菜单底部内容

Option Attributes

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

Option Group Attributes

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