Select选择器

Select 选择器

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

基础⽤法

适⽤⼴泛的基础单选

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

12

View Code

有禁⽤选项

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

1 12

13

View Code

禁⽤状态

选择器不可⽤状态

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

1 11

12

View Code

可清空单选

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

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

1 11

12

View Code

基础多选

适⽤性较⼴的基础多选，⽤ Tag 展⽰已选项

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

1 25

26

View Code

⾃定义模板

可以⾃定义备选项

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

分组

备选项进⾏分组展⽰

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

1 16

17

View Code

可搜索

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

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

1 11

12

View Code

远程搜索

从服务器搜索数据，输⼊关键字进⾏查找

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

1 19

20

View Code

创建条⽬

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

使⽤allow-create属性即可通过在输⼊框中输⼊⽂字来创建新的条⽬。注意此时filterable必须为真。

本例还使⽤了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第⼀个选项，⽆需使⽤⿏标或键盘⽅向键进⾏定位。

1 17

18

View Code

Select Attributes

参数

multipledisabledvalue-keysizeclearablecollapse-tagsmultiple-limit

是否多选是否禁⽤

作为 value 唯⼀标识的键名，绑定值为对象类型时必填输⼊框尺⼨

单选时是否可以清空选项

多选时是否将选中值按⽂字的形式展⽰

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

说明

类型boolean—boolean—stringstring

—

可选值

默认值falsefalsevaluefalsefalse0

medium/small/mini—

boolean—boolean—number—

name

参数

select input 的 name 属性说明

string类型—可选值

auto-completeselect input 的 autocomplete 属性string—placeholder占位符string

—

filterable是否可搜索

boolean—allow-create是否允许⽤户创建新条⽬，需配合 filterable 使⽤boolean—filter-method⾃定义搜索⽅法function—remote是否为远程搜索boolean—remote-method远程搜索⽅法

function—loading是否正在从远程获取数据boolean—loading-text远程加载时显⽰的⽂字string—no-match-text搜索条件⽆匹配时显⽰的⽂字string—no-data-text选项为空时显⽰的⽂字string—popper-classSelect 下拉框的类名

string

—

reserve-keyword多选且可搜索时，是否在选中⼀个选项后保留当前的搜索关键词boolean—default-first-option

在输⼊框按下回车，选择第⼀个匹配项。需配合 filterable 或 remote 使⽤

boolean-popper-append-to-body是否将弹出框插⼊⾄ body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

boolean-

Select Events

事件名称说明

回调参数

change选中值发⽣变化时触发⽬前的选中值

visible-change下拉框出现/隐藏时触发出现则为 true，隐藏则为 falseremove-tag多选模式下移除tag时触发

移除的tag值clear可清空的单选模式下⽤户点击清空按钮时触发—

blur当 input 失去焦点时触发(event: Event)focus

当 input 获得焦点时触发

(event: Event)

Option Group Attributes

参数说明

类型可选值默认值label分组的组名

string——disabled

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

boolean

—

false

Option Attributes

参数说明

类型

可选值默认值value选项的值

string/number/object——label选项的标签，若不设置则默认与 value 相同string/number——disabled

是否禁⽤该选项

boolean

—

false

Methods

⽅法名说明

参数

focus

使 input 获取焦点

-—默认值off请选择falsefalse—false—false加载中⽆匹配数据⽆数据—falsefalsetrue