# Select 选择器
# Select 概述
使用模拟的增强下拉选择器来代替浏览器原生的选择器。 选择器支持单选、多选、搜索，以及键盘快捷操作。
# Select 代码演示
# 基础用法
基本用法。可以使用 v-model 双向绑定数据。
单选时，value 只接受字符串和数字类型；多选时，只接受数组类型；多选又设置了isString的情况下，只接受字符串类型；组件会自动根据 Option 的 value 来返回选中的数据。
可以给 Select 添加 style 样式，比如宽度。
在展开选择器后，可以使用键盘的 up 和 down 快速上下选择，按下 Enter 选择，按下 Esc 收起选择器。
# 多选
通过设置属性 multiple 开启多选模式，点击复选框选中选项。多选模式下，model 接受数组类型的数据，所返回的也是数组。
# 禁用
通过给 Select 设置属性 disabled 禁用整个选择器。
通过给 Option props Option 设置属性 disabled 可以禁用当前项。
# 可清空
通过设置属性 clearable 可以清空已选项，仅适用于单选模式。
clearSingleSelect 方法，清空单选项，仅在 clearable="true" 时有效。
# 可搜索
通过设置属性 filterable 可以开启搜索模式。单选和多选都支持搜索模式。多选搜索时，可以使用键盘 Delete 快捷删除最后一个已选项。
支持模糊查询，不支持拼音查询。
on-query-change 事件：搜索词改变时触发，控制台中可查看。
setQuery 方法：设置搜索词，为空时清空，仅在 filterable="true" 时有效。
# 远程搜索
远程搜索需同时设置 filterable 、 remote 、 remote-method 、 loading 四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。loading-text 为远程搜索中的文字提示 ,默认显示加载中。
注意：需要给 Option 设置 key。
设置初始显示值，需设置 label 属性。
本例为美国州名，尝试输入一些字母。
# 尺寸
通过设置 size 属性为 large 和 small 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。
# 选择框默认文字
通过 placeholder 属性设置选择框默认文字，不设置默认为请选择。
# 当下拉列表为空时显示的内容
通过 not-found-text 属性设置当下拉列表为空时显示的内容，不设置为默认无匹配数据。
输入框中输入值，无匹配值时显示该内容。
# 是否将 label 和 value 一并返回
通过 label-in-value 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value。
on-change 事件，选中的 Option 变化时触发，默认返回 value，如需返回 label，设置 label-in-value。
# 弹窗的展开方向
通过 placement 弹窗的展开方向，可选值为 bottom 和 top。默认值为 bottom。
# 分组
使用 Option-group 可将选项进行分组。
# 自定义模板
对选项内容可以进行自定义。注意在 Option 中使用 label 属性，可以让选择器优先读取该属性的值以显示，否则选中时显示的内容会和自定义的一样，这往往不是我们想要的。
对于选项显示内容的逻辑：优先显示 slot 内容，如果没有定义 slot，则显示 label 的值，如果没有设置 label，则显示 value 的值。
# 下拉增加数据
用于数据量大的场景,通过 on-scroll 事件监听滚动条位置，动态的加载 option 中的数据。
# 允许添加新条目
当关键字检索不到条目时，允许用户将关键字添加为新条目。
# 远程搜索自定义图标
需开启远程搜索 remote
注意： remoteIcon 配置 hui 图标库中的 icon 的 name。
# algin 设置文本对齐方式
使用 algin 可以设置文本对齐方式，可选值有 left， center， right
默认为 left
# setDefSelect 默认选择第一条
使用 setDefSelect 可以设置默认选择第一条，适合不能为空的业务场景。
控件第一次挂载有效且单选有效。
# 下拉框宽度设置
dropWidth 设置下拉框宽度，不设置时等于输入框宽度。
maxDropWidth 下拉框的自适应时设置的最大宽度，实际值会取输入框宽度与 maxDropWidth 的最大值。
widthAdaption 下拉框的宽度是否随着内容自适应，以 select 设置的宽度为最小宽度，最大宽度取输入框宽度与 maxDropWidth 的最大值。
# isBackClear 使用退格键清空选项
isBackClear 设置当按下退格键 Backspace 时，清空所选项
多选模式下清空全部选项
仅支持 Chrome 浏览器
# multClearable 多选框清空按钮
multClearable 为多选框提供全部清空按钮。
# zeroToNull 双向绑定空选项和 0
zeroToNull 双向绑定输入‘0’转化为空值，输出空值转化为‘0’(单选有效)。
# collapseTags 压缩显示多选项
collapseTags 多选时是否将选项压缩展示个数
TIP
注意:多选可搜索时，若需要将搜索输入框与选中值同行显示，设置样式 .h-select-input{ width:20px; } 即可。
# notAutoFocus 和 accuFilter
notAutoFocus不自动将焦点放在第一搜索项。accuFilter如果搜索时输入的信息完全匹配到 value 或者 label 的时候自动勾上 （不支持远程搜索）。
# 全选过滤后的数据
isSelectFilter 开启后全选时改为只选择过滤后的数据，而不是全部数据。
# 多选时输入框显示 value 值
showValue 开启后多选时输入框的已选项 tag 改为显示 value 值，而不是默认的 label。
# 下拉框方向自定义
autoPlacement 日期面板方向自适应，其相对于外部第一个非静态定位父元素开始定位。
# Select API
# Select props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array，多选时如果设置了isString 只接受 String | String | Number | Array | 空 |
| multiple | 是否支持多选 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| clearable | 是否可以清空选项，只在单选时有效 | Boolean | true |
| filterable | 是否支持搜索 | Boolean | false |
| remote | 是否使用远程搜索 | Boolean | false |
| remote-method | 远程搜索的方法 | Function | - |
| filter-method | 本地自定义搜索方法（v1.0.68）不支持远程搜索 自定义单个 option 的方法， return true 表示显示 return false 表示不显示返回参数： val (搜索值) obj （当前 option 对象） | Function | - |
| loading | 当前是否正在远程搜索 | Boolean | false |
| loading-text | 远程搜索中的文字提示 | String | 加载中 |
| showLoadingIcon | 显示 loading 动画效果，需配合使用 loading (v1.0.67) | Boolean | false |
| label | 仅在 remote 模式下，初始化时使用。因为仅通过 value 无法得知选项的 label，需手动设置。 | String | Number | Array | 空 |
| size | 选择框大小，可选值为 large 和 small 或者不填(只在单选时生效) | String | - |
| placeholder | 选择框默认文字 | String | 请选择 |
| not-found-text | 当下拉列表为空时显示的内容 | String | 无匹配数据 |
| label-in-value | 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value | Boolean | false |
| placement | 弹窗的展开方向，可选值为 bottom 和 top、bottom-start 和 top-start ( bottom-start、top-start 属性只在 1.0.14 或以上版本有效 ) | String | bottom |
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
| isString | 只在多选模式下使用,将多选时双向绑定的变量的格式变为 String 类型，多个选项用 ' , ' 隔开 | Boolean | false |
| isCheckall | 是否显示全选反选快捷方式，只在多选模式下使用 | Boolean | false |
| noMoreText | 下拉加载完成数据提示,只在使用下拉局部刷新数据时使用 | String | 没有更多数据 |
| isComputed | 是否显示加载完成数据提示,只在使用下拉局部刷新数据时使用 | Boolean | false |
| isArrow | 不显示箭头，默认显示 | Boolean | true |
| algin | 文本显示位置 left、 center、 right | String | left |
| setDefSelect | 输入框选择为空时默认选择第一条(控件第一次挂载有效且单选有效） | Boolean | false |
| dropWidth | 设置下拉框的宽度,不设置时下拉框的宽度等于输入框宽度 | String/Number | - |
| showBottom | 搜索框显示位置，只在 ( filterable为true ) 时使用,默认显示在输入框位置，设置为 true 时显示在下拉框顶部 | Boolean | false |
| searchHolder | 搜索框显示位置在下拉框中时，框内显示文字 | String | 请输入匹配字段 |
| checkToHead | 筛选框左侧加入多选框，可进行全选取消功能，请不要 isCheckall 同时使用（只在多选且筛选框下有效）(此属性只在1.0.10或以上版本有效) | Boolean | false |
| showTitle | 是否显示提示(此属性只在 1.0.11 或以上版本有效) | Boolean | false |
| specialIndex | 下拉框 value 为 '-1' 选项和其他选项需要互斥时使用（为 true 时互斥） | Boolean | false |
| hideMult | 隐藏多选框的多选模式 （只在设置多选时有效） （此属性只在 1.0.19 或以上版本有效）（超长显示省略号所以 widthAdaption 不会触发） | Boolean | false |
| focusSelect | 光标进入输入框时是否选中文字（仅在单选模式下filterable为true时生效）（此属性只在1.0.20或以上版本有效） | Boolean | true |
| remoteFocusNotShowList | 远程单选搜索，已选中选项后光标进入输入框时是否显示下拉选项【修改搜索内容可以正常显示下拉】（不支持focusSelect及showBottom）（此属性只在1.0.22或以上版本有效） | Boolean | false |
| scrollFix | 滚动时先固定滚动条，只有滚动至当屏最上方或者最下方时进行滚动条滚动，否则滚动条不动，只改变 focusIndex 值(此属性只在 1.0.24 或以上版本有效,不支持静态搜索) | Boolean | false |
| multClearable | 多选框是否显示总体清空图标(V1.0.25) | Boolean | false |
| isBackClear | 输入框是否可通过 backspace 按键清除选中项（ V1.0.25，只支持谷歌 ） | Boolean | false |
| zeroToNull | 双向绑定输入 ' 0 ' 转化为空值，输出空值转化为 '0' （单选有效）(V1.0.26) | Boolean | false |
| widthAdaption | 下拉框的宽度是否随着内容自适应，以 select 设置的宽度为最小宽度，最大宽度取输入框宽度与 maxDropWidth 的最大值（此属性只在 1.0.26 或以上版本有效） | Boolean | false |
| maxDropWidth | 下拉框的自适应时设置的最大宽度，实际值会取输入框宽度与 maxDropWidth 的最大值 （此属性只在 1.0.26 或以上版本有效） | String / Number | 500 |
| allowCreate | 是否允许新建条目。需配合开启 filterable（ 此属性只在1.0.30或以上版本有效 ） | Boolean | false |
| autoPlacement | 日期面板方向自适应，其相对于外部第一个非静态定位父元素开始定位 (v1.0.31) | Boolean | false |
| remoteIcon | 开启远程搜索时，右侧显示的图标（ 配置 hui 图标库中的 name ）,使用此属性需开启 remote (v1.0.32) | String | - |
| collapseTags | 多选时是否将选项压缩展示个数 ( 此属性只在 1.0.37 或以上版本有效 )，注意:多选可搜索时，若需要将搜索输入框与选中值同行显示，设置样式 .h-select-input { width: 20px; } 即可 | Boolean | false |
| notAutoFocus | 搜索时是否不将焦点放在第一搜索项 (v1.0.37) | Boolean | false |
| isSelectFilter | 全选时是否全选过滤后的数据 (v1.0.41) | Boolean | false |
| showValue | 多选时输入框是否显示 value 值，默认label(v1.0.43) | Boolean | false |
| accuFilter | 多选时是否开启精确搜索，如果搜索时输入的信息完全匹配到 value 或者 label 的时候 自动勾上，暂不支持远程搜索（需开启 filterable ）(v1.0.43) 注意：当option同时设置了lable，slot，搜索选中的label匹配项，会两项都可以作为匹配项 v1.12.0 | Boolean | false |
| validate | 组件是否触发校验事件 (v1.0.45) | Boolean | true |
| tabindex | 设置输入框 tabindex (v1.0.47) | String | Number | -1 |
| tabToSave | 当开启 allowCreate、filterable、tabToSave 表示新建条目时，输入Tab键，保存当前新建条目（与 enter 键功能一样）(v1.0.68) | Boolean | false |
| initValueTypeToString | 初始化 v-model 绑定的 value 值，如果数据类型是 Number 类型，可以将 Number 类型转化成 string 类型，e.g: 1 ===> '1' (v1.0.62) 注：此功能仅在初始化 v-model 数据时候有效，并非改变 v-model 绑定变量的类型 | Boolean | false |
| queryNotEmpty | 当 multiple remote-method 时，设置此属性 query 在控件不失去焦点的情况下，query 保留之前的搜索值。 当 dropdown 隐藏时，控件失去焦点，query = ‘’， 触发 remoteMethod() (v1.0.65) | Boolean | false |
| maxlength | 控制输入框可输入长度，需配合开启 filterable (v1.0.68) | Number | - |
| chooseToRemoteMethod | 表示在单选时，当用户选择某个选择项时，触发 数据为空 的远程搜索 (remote-method ) 仅适用于单选（ v1.0.68） | Boolean | false |
| multipleNumber | 表示用户在多选情况下，限制用户选择的个数 (v1.0.68) 暂时不支持用 arr.push、pop 等方法添加或者删除 v-model 绑定的值 | Number | String | null |
| valueNotMatch | true：表示 v-model 绑定的变量值与下拉选择的值不匹配（即脏数据）会把 v-model 的清空 (v1.0.86) 针对单选有效，不支持远程搜索，不支持allowCreate多选场景下，脏值不匹配下拉列表时，当前数值在 v-model 绑定的变量中清除 (v1.0.89) false: 保留原先的值（默认） 注意：设置valueNotMatch为true时，修改options对应list和修改v-model需要异步进行 | Boolean | false |
| dropMinWidth | 下拉框的最小宽度，当输入框大于dropMinWidth时，让下拉面板与输入框同宽；当输入框小于dropMinWidth时，下拉框用dropMinWidt(v1.1.1) 注意：与widthAdaption互斥 | String | Number | - |
# Select events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-change | 选中的 Option 变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性 | 当前选中项 |
| on-query-change | 搜索词改变时触发 | query |
| on-scroll | 数据太多出现滚动条，改变滚动条触发 | 返回第一个参数为滚动条距离底部的距离（数据为0时表示滚动已经滚动到底部）；第二个参数为滚动方向 ("x" 代表水平滚动，"y" 代表垂直滚动，v1.0.47) |
| on-blur | 失去焦点时触发（只在 filterable 为 true 下有效）（此属性只在 18 版本及以上有效） | 无 |
| on-focus | 获取焦点时触发 （只在 filterable 为 true 下有效）（此属性只在 1.0.49 版本及以上有效） | 无 |
| on-drop-change | 弹框关闭/展开时触发 (v1.0.43) | 弹窗状态 |
| on-keydown | 键盘按键按下触发 (v1.0.51) | 参数一：value 参数二：event |
| on-keyup | 键盘按键弹起触发 (v1.0.51) | 参数一：value 参数二：event |
| on-item-remove | 多选时有效 1. 点击每个选中项 item 后的×，触发事件 2. 当 filterable && !isBackClear 键盘输入 backspace 等删除键时，删除单个 item 时，触发事件 3. 直接点击下拉列表已选中的项, 触发事件 (v1.0.74) | 参数一：当前选中项 参数二：当前项的索引 |
# Select methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| setQuery | 设置搜索词，为空时清空，仅在 filterable="true" 时有效 | query |
| clearSingleSelect | 清空单选项，仅在 clearable="true" 时有效 | 无 |
| focus | 通过 this.refs.xxx.focus() 调用,是当前输入框获取焦点,并打开选择面板（此方法只在1.0.9或以上版本有效） | 无 |
| blur | 手动取消输入框焦点 ( this.$refs.xxx.blur() )（此属性只在1.0.10或以上版本有效） | 无 |
| toggleSelect | 全选/全不选 ( this.$refs.xxx.toggleSelect() ) | Boolean::status |
# Select Slot
| 名称 | 说明 |
|---|---|
| header | 自定义弹框头部内容 (v1.0.43) |
| footer | 自定义弹框尾部内容 (v1.0.22) |
# Option props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 选项值，默认根据此属性值进行筛选，必填 | String | Number | 无 |
| label | 选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。当选中时，选择器会显示 label 为已选文案。大部分情况不需要配置此项，直接写入 slot 即可，在自定义选项时，该属性非常有用。 | String | - |
| disabled | 是否禁用当前项 | Boolean | false |
# OptionGroup props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 分组的组名 | String | 空 |
# Option Events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-keyup | enter 选中时触发（ 仅在1.0.25版本及其以上使用 ） | 当前选中项 value |