@aliretail/react-materials-components
Version:
73 lines (70 loc) • 12.5 kB
Markdown
---
title: Select-API
order: 3
category: UI
description: Select 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---
## API
### Select
| 参数 | 说明 | 类型 | 默认值 | 备注 | |
| :--------------------- | :----------------------------------------------------------- | :---------------------------------- | :------------------ | ---- | ----------- |
| searchHighlight | 搜索高亮 | Boolean | false | 零售云新增配置 | |
| optionsName | options 分栏name | Array | ['label'] | 零售云新增配置 | |
| optionsShowAll | options hover 展示更多 | Boolean | false | 零售云新增配置 | |
| selectTextSwitch | select选中项切换 | Boolean | false | 零售云新增配置 | |
| size | 选择器尺寸 **可选值**: 'small', 'medium', 'large' | Enum | 'medium' | | |
| value | 当前值，用于受控模式 | any | - | | |
| defaultValue | 初始的默认值 | any | - | | |
| placeholder | 没有值的时候的占位符 | String | - | | |
| autoWidth | 下拉菜单是否与选择器对齐 | Boolean | true | | |
| label | 自定义内联 label | ReactNode | - | | |
| hasClear | 是否有清除按钮（单选模式有效） | Boolean | - | | |
| state | 校验状态 **可选值**: 'error', 'loading' | Enum | - | | |
| readOnly | 是否只读，只读模式下可以展开弹层但不能选 | Boolean | - | | |
| disabled | 是否禁用选择器 | Boolean | - | | |
| visible | 当前弹层是否显示 | Boolean | - | | |
| defaultVisible | 弹层初始化是否显示 | Boolean | - | | |
| onVisibleChange | 弹层显示或隐藏时触发的回调 **签名**: Function(visible: Boolean, type: String) => void **参数**: *visible*: {Boolean} 弹层是否显示 *type*: {String} 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop | | |
| popupContainer | 弹层挂载的容器节点 | any | - | | |
| popupClassName | 弹层的 className | any | - | | |
| popupStyle | 弹层的内联样式 | Object | - | | |
| popupProps | 添加到弹层上的属性 | Object | {} | | |
| followTrigger | 是否跟随滚动 | Boolean | - | | |
| popupContent | 自定义弹层的内容 | ReactNode | - | | |
| menuProps | 添加到菜单上的属性 | Object | - | | |
| filterLocal | 是否使用本地过滤，在数据源为远程的时候需要关闭此项 | Boolean | true | | |
| filter | 本地过滤方法，返回一个 Boolean 值确定是否保留 **签名**: Function(key: String, item: Object) => Boolean **参数**: *key*: {String} 搜索关键字 *item*: {Object} 渲染节点的item **返回值**: {Boolean} 是否匹配 | Function | filter | | |
| defaultHighlightKey | 默认高亮的 key，不要和 autoHighlightFirstItem 同时使用 | String | null | | |
| highlightKey | 高亮 key，不要和 autoHighlightFirstItem 同时使用，用于受控模式 | String | - | | |
| onToggleHighlightItem | 键盘上下键切换菜单高亮选项的回调 **签名**: Function() => void | Function | func.noop | | |
| autoHighlightFirstItem | 自动高亮第一个元素 | Boolean | true | | |
| useVirtual | 是否开启虚拟滚动模式 | Boolean | - | | |
| dataSource | 传入的数据源，可以动态渲染子项，详见 [dataSource的使用](https://alifd.alicdn.com/demos-pages/@alifd/next/Select@1.21.10/@alife/theme-blue@1.2.3/index.zh-cn.html#dataSource的使用) | Array<Object/Boolean/Number/String> | - | | |
| itemRender | 渲染 MenuItem 内容的方法 **签名**: Function(item: Object, searchValue: String) => ReactNode **参数**: *item*: {Object} 渲染节点的item *searchValue*: {String} 搜索关键字（如果开启搜索） **返回值**: {ReactNode} item node | Function | - | | |
| mode | 选择器模式 **可选值**: 'single', 'multiple', 'tag' | Enum | 'single' | | |
| notFoundContent | 弹层内容为空的文案 | ReactNode | - | | |
| isPreview | 是否为预览态 | Boolean | - | | |
| renderPreview | 预览态模式下渲染的内容 **签名**: Function(value: number) => void **参数**: *value*: {number} 评分值 | Function | - | | |
| showDataSourceChildren | 是否展示 dataSource 中 children | Boolean | - | | |
| onChange | Select发生改变时触发的回调 **签名**: Function(value: mixed, actionType: String, item: mixed) => void **参数**: *value*: {mixed} 选中的值 *actionType*: {String} 触发的方式, 'itemClick', 'enter', 'tag' *item*: {mixed} 选中的值的对象数据 (useDetailValue=false有效) | Function | - | | |
| hasBorder | 是否有边框 | Boolean | - | | |
| hasArrow | 是否有下拉箭头 | Boolean | true | | |
| showSearch | 展开后是否能搜索（tag 模式下固定为true） | Boolean | false | | |
| onSearch | 当搜索框值变化时回调 **签名**: Function(value: String) => void **参数**: *value*: {String} 数据 | Function | func.noop | | |
| onSearchClear | 当搜索框值被(选择、弹窗关闭)导致清空时候的回调 **签名**: Function(actionType: String) => void **参数**: *actionType*: {String} 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空) | Function | func.noop | | |
| hasSelectAll | 多选模式下是否有全选功能 | Boolean/String | - | | |
| fillProps | 填充到选择框里的值的 key | String | - | | |
| useDetailValue | value 使用对象类型 `{value, label}`, 同时 onChange 第一个参数返回也修改为 dataSource 中的对象 | Boolean | - | | |
| cacheValue | dataSource 变化的时是否保留已选的内容 | Boolean | true | | |
| valueRender | 渲染 Select 展现内容的方法 **签名**: Function(item: Object) => ReactNode **参数**: *item*: {Object} 渲染节点的item **返回值**: {ReactNode} 展现内容 | Function | item => `item.label | | item.value` |||
| searchValue | 受控搜索值，一般不需要设置 | String | - | | |
| tagInline | 是否一行显示，仅在 mode 为 multiple 的时候生效 | Boolean | false | | |
| tagClosable | tag 是否可关闭 | Boolean | true | | |
| maxTagCount | 最多显示多少个 tag | Number | - | | |
| maxTagPlaceholder | 隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用 **签名**: Function(selectedValues: object, totalValues: object) => void **参数**: *selectedValues*: {object} 当前已选中的元素 *totalValues*: {object} 总待选元素 | Function | - | | |
| hiddenSelected | 选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效) | Boolean | - | | |
| onRemove | tag 删除回调 **签名**: Function(item: object) => void **参数**: *item*: {object} 渲染节点的item | Function | func.noop | | |
| onFocus | 焦点事件 **签名**: Function() => void | Function | func.noop | | |
| onBlur | 失去焦点事件 **签名**: Function() => void | Function | func.noop | | |
| popupAutoFocus | 展开下拉菜单时是否自动焦点到弹层 | Boolean | false | | |