Select 选择器

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

基础用法适用广泛的基础单选

v-model的值为当前被选中的el-option的 value 属性值

代码语言：javascript复制

有禁用选项在el-option中，设定disabled值为 true，即可禁用该选项

代码语言：javascript复制

禁用状态选择器不可用状态

为el-select设置disabled属性，则整个选择器不可用

代码语言：javascript复制

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

为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

代码语言：javascript复制

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

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

代码语言：javascript复制

自定义模板可以自定义备选项

将自定义的 HTML 模板插入el-option的 slot 中即可。

代码语言：javascript复制

分组备选项进行分组展示

使用el-option-group对备选项进行分组，它的label属性为分组名

代码语言：javascript复制

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

为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

代码语言：javascript复制

远程搜索从服务器搜索数据，输入关键字进行查找

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

代码语言：javascript复制

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

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

代码语言：javascript复制

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

Select Attributes参数

说明

类型

可选值

默认值

multiple

是否多选

boolean

—

false

disabled

是否禁用

boolean

—

false

value-key

作为 value 唯一标识的键名，绑定值为对象类型时必填

string

—

value

size

输入框尺寸

string

medium/small/mini

—

clearable

单选时是否可以清空选项

boolean

—

false

collapse-tags

多选时是否将选中值按文字的形式展示

boolean

—

false

multiple-limit

多选时用户最多可以选择的项目数，为 0 则不限制

number

—

0

name

select input 的 name 属性

string

—

—

auto-complete

select input 的 autocomplete 属性

string

—

off

placeholder

占位符

string

—

请选择

filterable

是否可搜索

boolean

—

false

allow-create

是否允许用户创建新条目，需配合 filterable 使用

boolean

—

false

filter-method

自定义搜索方法

function

—

—

remote

是否为远程搜索

boolean

—

false

remote-method

远程搜索方法

function

—

—

loading

是否正在从远程获取数据

boolean

—

false

loading-text

远程加载时显示的文字

string

—

加载中

no-match-text

搜索条件无匹配时显示的文字

string

—

无匹配数据

no-data-text

选项为空时显示的文字

string

—

无数据

popper-class

Select 下拉框的类名

string

—

—

reserve-keyword

多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

boolean

—

false

default-first-option

在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用

boolean

-

false

popper-append-to-body

是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

boolean

-

true

automatic-dropdown

对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单

boolean

-

false

Select Events事件名称

说明

回调参数

change

选中值发生变化时触发

目前的选中值

visible-change

下拉框出现/隐藏时触发

出现则为 true，隐藏则为 false

remove-tag

多选模式下移除tag时触发

移除的tag值

clear

可清空的单选模式下用户点击清空按钮时触发

—

blur

当 input 失去焦点时触发

(event: Event)

focus

当 input 获得焦点时触发

(event: Event)

Select Slotsname

说明

—

Option 组件列表

prefix

Select 组件头部内容

Option Group Attributes参数

说明

类型

可选值

默认值

label

分组的组名

string

—

—

disabled

是否将该分组下所有选项置为禁用

boolean

—

false

Option Attributes参数

说明

类型

可选值

默认值

value

选项的值

string/number/object

—

—

label

选项的标签，若不设置则默认与 value 相同

string/number

—

—

disabled

是否禁用该选项

boolean

—

false

Methods方法名

说明

参数

focus

使 input 获取焦点

-

blur

使 input 失去焦点，并隐藏下拉框

-