ElementUI浅尝辄止37：Select 选择器

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

1.如何使用？基础单选

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

2.禁用选项

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

3.禁用状态

选择器不可用状态

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

4.可清空单选

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

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

5.基础多选

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

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

6.自定义模板

可以自定义备选项

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

7.分组

备选项进行分组展示

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

8.可搜索

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

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

9.远程搜索

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

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

10.创建条目

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

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

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