# SimpleSelect 简单选择器
此组件仅在 v1.0.21 版本以及以上支持
# SimpleSelect 概述
大量数据使用。
选择器支持单选、多选、过滤。
# SimpleSelect 代码演示
# 基础用法
基本用法。可以使用 v-model 双向绑定数据。
单选时，value 只接受字符串，多选时，只接受数组类型，组件会自动根据 Option 的 value 来返回选中的数据。
可以给 Select 添加 style 样式，比如宽度。
# 多选
通过设置属性 multiple 开启多选模式，点击复选框选中选项。多选模式下，model 接受数组类型的数据，所返回的也是数组。
# 可搜索
通过设置属性 filterable 可以开启搜索模式。单选和多选都支持搜索模式。多选搜索时，可以使用键盘 Delete 快捷删除最后一个已选项。
支持模糊查询，不支持拼音查询。
on-query-change 事件：搜索词改变时触发，控制台中可查看。
setQuery 方法：设置搜索词，为空时清空，仅在 filterable="true" 时有效。
# 弹窗的展开方向和多列
通过 placement 弹窗的展开方向，可选值为 bottom 和 top。默认值为 bottom。
# 远程搜索
远程搜索需同时设置 filterable、remote、remote-method、loading 四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。
loading-text 远程搜索中的文字提示，默认显示加载中。
注意：需要给 Option 设置 key。
设置初始显示值，需设置 label 属性。
本例为账号，尝试输入一些数字。
# 是否全选过滤后的数据
isSelectFilter 开启后使用全选功能时将自动全选过滤后的数据。
# 隐藏多选框
hideMult 只在多选模式下生效，开启后隐藏左侧多选框。
# 聚焦指定选项
focusInit 类型为Number，设置后将会默认聚焦在某一项。
例如实例中 focusInit=5，即默认聚焦设置项。
# 设置互斥项
specialIndex 在多选模式下，开启特殊项。
specialVal 开启特殊项之后，使用该值指定特殊项的 Value，特殊项将与其他项互斥。
例如实例中 specialVal = "CD3Z" ，即 CD3Z 将与其他项互斥。
# 选择框内显示已选数量
showTotalNum 离开当前选项框时显示当前选择项数目，项数大于 2 时生效。
# 远程搜索时显示下拉箭头
showArrow 远程搜索时默认不显示箭头，设置该属性后重新显示箭头。
# 多选时已选项显示 value
showValue 多选时已选项默认显示 label，设置该属性后可以改为显示 value。
# 精确搜索时自动勾选
accuFilter 多选时开启筛选，如果输入内容与某选项一致，就自动选中该内容。
# on-change返回类型
valueToString 多选时在 on-change 事件中是否返回 string 类型的 value 值。
label-in-value 多选时在 on-change 事件中 将 value 和 label 一起返回。
注： valueToString 与 label-in-value 不能同时配置。
# 退格键清空
isBackClear 按下退格键自动清空内容。
# 自定义搜索图标
searchIcon 展示搜索图标，配置图标名。
需要配合开启 filterable ，且不能与 showArrow 同时使用。
# 选项分组
选项分组时的 block data 的结构如下：[ { group: '浙江省': options: [ { label: '杭州市', value: 'hz' } ] } ]
# 自定义本地搜索
自定义本地搜索需同时设置 filterable、filter-method。
# SimpleSelect API
# SimpleSelect props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String，多选时只接受 Array | String | Number | Array | 空 |
| multiple | 是否支持多选 | Boolean | false |
| clearable | 是否可以清空选项，只在单选时有效 | Boolean | true |
| filterable | 是否支持搜索 | Boolean | false |
| filterBy | 可配置根据 value 还是 label 来筛选选项，默认根据 value 和 label 筛选 | String | - |
| placeholder | 选择框默认文字 | String | 请选择 |
| label-in-value | 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value | Boolean | false |
| placement | 弹窗的展开方向，可选值为 bottom 和 top bottom-start 和 top-start | String | bottom |
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
| dropWidth | 设置下拉框的宽度,不设置时下拉框的宽度等于输入框宽度 (v1.0.30) | String/Number | - |
| showBottom | 搜索框显示位置，只在 (filterable 为 true) 时使用,默认显示在输入框位置，设置为 true 时显示在下拉框顶部 | Boolean | false |
| checkToHead | 筛选框左侧加入多选框，可进行全选取消功能 | Boolean | false |
| widthAdaption | 下拉框的宽度是否随着内容自适应，以 Simple-select 设置的宽度为最小宽度，最大宽度取输入框宽度与 maxDropWidth 的最大值 (v1.0.31) | Boolean | false |
| maxDropWidth | 下拉框的自适应时设置的最大宽度，实际值会取输入框宽度与 maxDropWidth 的最大值 (v1.0.31) | String/Number | 500 |
| autoPlacement | 下拉面板方向自适应，其相对于外部第一个非静态定位父元素开始定位 (v1.0.30) | Boolean | false |
| remote | 是否使用远程搜索 (v1.0.32) | Boolean | false |
| remote-method | 远程搜索的方法 (v1.0.32) | Function | - |
| filter-method | 本地自定义搜索方法 (v1.0.85) 不支持远程搜索 自定义单个 option 的方法， return true 表示显示 return false 表示不显示返回参数： val （索值） obj （当前 option 对象) 注意：与filterBy相斥 | Function | - |
| isSelectFilter | 全选时是否全选过滤后的数据 (v1.0.34) | Boolean | false |
| hideMult | 隐藏多选框的多选模式（只在设置多选时有效） (v1.0.37) | Boolean | false |
| focusInit | 默认聚焦选项的 index (v1.0.38) | Number | 0 |
| loading | 配合远程搜索使用。loading 设置为 true 时显示加载提示文字。(v1.0.40) | Boolean | false |
| loadingText | 加载中显示的文字。(v1.0.40) | String | 加载中 |
| showLoadingIcon | 显示 loading 动画效果，需搭配使用 loading=true (v1.0.67） | Boolena | false |
| specialIndex | 是否开启特殊项目，选择特殊项与其他项互斥 (v1.0.41) | Boolean | false |
| specialVal | 特殊项关键值 (value) (v1.0.41) | String | -1 |
| showTotalNum | 离开当前选项框时显示当前选择项数目，项数大于 2 时生效 (v1.0.41) | Boolean | false |
| showArrow | 远程搜索时显示下拉箭头 (v1.0.43) | Boolean | false |
| showValue | 多选时输入框是否显示 value 值，默认 label，对多选有效 (v1.0.43) 1. 鼠标悬浮 title 显示 value 文本 2. 支持单选 (v1.0.85) | Boolean | false |
| accuFilter | 搜索精确匹配，如果搜索时输入的信息完全匹配到value或者label的时候 自动勾选，暂不支持远程搜索（需开启filterable）(v1.1.1)单选使用建议开启showBottom属性 | Boolean | false |
| remoteNoQuery | 远程搜索时不执行 filter (v1.0.44) | Boolean | false |
| valueToString | 多选时在on-change事件中是否返回string类型的 value 值（注：与label-in-value不能同时配置） (v1.0.45) | Boolean | false |
| newSearchModel | 是否开启新的搜索模式（o45 个性化业务专用）(v1.0.4) | Boolean | false |
| isBackClear | 输入框是否可通过 backspace 按键清除选中项 (V1.0.45，只支持谷歌) | Boolean | false |
| searchIcon | 展示搜索图标，配置图标名。注意：需要配合开启 filterable ，且不能与 showArrow 同时使用 (v1.0.46) | String | false |
| tabindex | 设置输入框 tabindex (v1.0.47) | String | Number | -1 |
| isCheckall | 是否显示全选反选快捷方式，只在多选模式下使用 (v1.0.63) | Boolean | false |
| showTitle | 下拉内容过长时鼠标移入是否显示提示信息 (v1.0.66) | Boolean | true |
| autoFocus | 是否自动高亮第一个检索选项 (v1.0.51) | Boolean | false |
| valueNotMatch | true：表示 v-model 绑定的变量值与下拉选择的值不匹配（即脏数据）会把 v-model 的清空 (v1.0.83)针对单选有效，不支持远程搜索false: 保留原先的值（默认） | Boolean | false |
| notFoundText | 自定义下拉列表数据为空时显示的文本内容 (v1.0.86) | String | 无匹配数据 |
| dropMinWidth | 下拉框的最小宽度，当输入框大于dropMinWidth时，让下拉面板与输入框同宽；当输入框小于dropMinWidth时，下拉框用dropMinWidt(v1.1.1)注意：与widthAdaption互斥 | String | Number | - |
| cleanByDel | 在过滤场景下，若为false,搜索内容为空时，点击delete不会删除选中节点，默认会删除(仅支持多选场景下) (v1.10.0) | Boolean | true |
# SimpleSelect events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-change | 选中的 Option 变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性 | 当前选中项 |
| on-query-change | 搜索词改变时触发，伴随可选项发生变化 | 搜索值 |
| on-focus | 获取焦点时触发 (只在 filterable 为 true 下有效) (v1.0.49) | 无 |
| on-blur | 失去焦点时触发 (只在 filterable 为 true下有效) (v1.0.48) | 无 |
| on-drop-change | 弹框关闭 / 展开时触发 (v1.0.48) | 弹窗状态 |
| on-clear-select | 监听清空事件。当清空所选项时会被触发 (v1.0.51) | 返回值为清空的选项 |
# SimpleSelect slot
| 名称 | 说明 |
|---|---|
| header | 自定义弹框头部内容 (v1.0.32) |
| footer | 自定义弹框尾部内容 (v1.0.32) |
# SimpleSelect methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| selectedTop (true/false) | 选择项置顶 (this.$refs.xxx.selectedTop() )\ (v1.0.32)，选择项恢复开始状态 (v1.0.41) | 无 |
| toggleSelect (true/false) | 全选/全不选 (this.$refs.xxx.toggleSelect() ) (v1.0.32) | 无 |
# Block props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 选择框中数据，必填 | Array | [] |
| showCol | 多列配置项，最多新增3列,具体请参考示例（v1.0.36） | Array | [] |
| showHeader | 为 showCol 和第一列 label 添加表头，具体请参考示例（v1.0.38） | Array | [] |
# showHeader options
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 列标题 | String | - |
| width | 列宽 | String | Number（'400' | 400） |
# Block data
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 选择项关键字 | String | -- |
| label | 选择项显示名称 | String | -- |
# Block events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-scroll | 下拉框滚动时触发 | 第一个参数为滚动条距离底部的高度，当滚动条到底时，返回值小于列表的一个行高约 30；第二个参数是列表的 scrollTop；第三个参数为滚动方向 （"x"代表水平滚动，"y"代表垂直滚动，1.0.47版本） |
| on-paste | 在 newSearchModel 模式下，输入框粘贴时触发 （暂不支持鼠标右键粘贴） | 返回 obj 对象包括 oldval 旧值，newval 新值（1.0.46支持） |
| on-input-focus | 在 newSearchModel 模式下，输入框得到焦点时触发（1.0.46支持） | - |
# simpleselect性能
| 下拉列表条数 | 2000 | 5000 | 10000 |
|---|---|---|---|
| 耗时 | 389ms | 508ms | 727ms |