# Select 下拉选择器

## 何时使用

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

### 基本使用

适用广泛的基础单选。  
设置选项的`disabled`属性将选项置位禁用。  
设置选项的`filterMethod`属性可以自由控制筛选结果。

@[demo](./demo/basic.vue)


### 尺寸大小

设置选项的`size`属性设置不同的尺寸。

@[demo](./demo/size.vue)



### 自定义option

使用`slot`， 也可以用`filterable`开启搜索。  

@[demo](./demo/slot.vue)


### 分组

使用嵌套结构进行分组

@[demo](./demo/group.vue)


### 多选

使用`multiple`开启支持多选

@[demo](./demo/multiple.vue)


### 指定值的属性名

使用`keymap`指定值的属性名

@[demo](./demo/key.vue)


### 初始值回填

如果初始`value`不在`options`内，则可使用`reserveOptions`渲染出对应`label`

@[demo](./demo/no-options.vue)

### Select props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value(v-model) | 输入框内容 | String/Number/Array | "" | - |
| options | 选项列表 | Array | [] | - |
| disabled | 禁用 | Boolean | false | true |
| placeholder | 选项列表 | String | "" | - |
| multiple | 是否多选 | boolean | false | true |
| keymap | key映射表 | boolean | false | true |
| value-key | 指定值的属性名 | string | 'value' | - |
| filterable | 是否可搜索 | boolean | false | true |
| clearable | 支持清除 | boolean | false | true |
| maxCount | 多选模式下限制数量 | Number | - | - |
| max-tag-width | 多选模式tag最大宽度 | String | - | - |
| max-tag-text-length | 多选模式下Tag文本的长度 | Number | - | - |
| borderless | 是否不显示Selection的边框 | boolean | false | - |
| filterMethod | 根据输入项进行筛选 | function | function(item, inputValue) | - |
| item-key | 每个选项用来作为唯一标识的属性 | String, function(item, index) | index索引 | - |
| multipleLazySync | 多选模式下组件向外同步选中值的变化是否延迟到下拉框消失时触发 | Boolean | false | true |
| popperOptions | popper.js 的参数 | Object/Function | 参考 popper.js 文档 | - |
| reserveOptions | 适用于回填初始值，当 value 从 options 未找到对应的 label 时，再从 reserveOptions 查找 | Array | [] | - |
| hideOnBlur | 是否在下拉选项列表失焦是就关闭下拉弹窗，默认为 true 时，点击 suffix 插槽中内容也会触发失焦关闭 | boolean | true | false |


### Select slots
| 插槽名 | 说明 |
| --- | --- |
| selection | 自定义选择框内容 |
| option | 自定义选择项内容 |
| suffix | 自定义下拉弹窗底部内容 |

### Select event
| 事件名 | 说明 |
| --- | --- |
| change | 选中一个选项时触发 |
| search | 搜索时触发 |
| search-keydown | 搜索时按下键盘 |
| search-input | 搜索时输入 |
| search-change | 搜索输入内容变化 |
| remove-last-value | 上一个值被删除时 |