Select 选择器

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

基础用法

有禁用选项

禁用状态

禁用整个选择器组件

可清空单选

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

基础多选

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

自定义模板

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

将选项进行分组

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

筛选选项

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

远程搜索

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

创建新的选项

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

TIP

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

Select 属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值string / number / boolean / object
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
value-key作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size输入框尺寸stringlarge/default/smalldefault
clearable是否可以清空选项booleanfalse
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
collapse-tags-tooltip当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags属性必须设定为 truebooleantrue / falsefalse
multiple-limitmultiple 属性设置为 true 时,代表多选场景下用户最多可以选择的项目数, 为 0 则不限制number0
nameSelect 输入框的原生 name 属性string
effectTooltip 主题,内置了 dark / light 两种stringstringlight
autocompleteSelect 输入框的原生 autocomplete 属性stringoff
placeholder占位文字stringSelect
filterableSelect 组件是否可筛选booleanfalse
allow-create是否允许用户创建新条目, 只有当 filterable 设置为 true 时才会生效。booleanfalse
filter-method自定义筛选方法function
remote其中的选项是否从服务器远程加载booleanfalse
remote-method自定义远程搜索方法function
loadingSelect 组件是否从远程加载数据booleanfalse
loading-text从服务器加载内容时显示的文本stringLoading
no-match-text搜索条件无匹配时显示的文字,也可以使用 empty 插槽设置stringNo matching data
no-data-text无选项时显示的文字,也可以使用 empty 插槽设置自定义内容stringNo data
popper-classSelect 下拉框的自定义类名string
reserve-keywordmultiplefilter被设置为 true 时,是否在选中一个选项后保留当前的搜索关键词booleantrue
default-first-option是否在输入框按下回车时,选择第一个匹配项。 需配合 filterableremote 使用boolean-false
popper-append-to-body(已废弃)是否将弹出框插入至 body 元素。 在弹出框的定位出现问题时,可将该属性设置为 falseboolean-true
teleported是否将下拉列表插入至 body 元素booleantrue / falsetrue
persistent当下拉选择器未被激活并且persistent设置为false,选择器会被删除。booleantrue / falsetrue
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单boolean-false
clear-icon自定义清除图标组件string / ComponentCircleClose
fit-input-width下拉框的宽度是否与输入框相同booleanfalse
suffix-icon自定义后缀图标组件string / ComponentArrowUp
tag-type标签类型stringsuccess/info/warning/dangerinfo
validate-event输入时是否触发表单的校验boolean-true

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
prefixSelect 组件头部内容
empty无选项时的列表

Option Group 属性

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

Option Group 插槽

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

Option 属性

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

Option 插槽

插槽名说明
默认插槽

Select 方法

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

源代码

组件文档

贡献者