Select
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| value | Key | Key[] | 当前值，controlled | ||
| defaultValue | Key | Key[] | 默认值，uncontrolled | ||
| placeholder | ReactNode | 无选项时显示内容 | ||
| onChange | (value: Key | Key[] | undefined) => void | 修改、清空时的回调，清空时回调值单选为 undefined、du px aun | ||
| options | { /** 选项展示 */ label?: ReactNode; /** 选项 value，不可重复 */ value: Key; }[] | 快速设置选项，推荐使用以获得更好的性能 | ||
| extra | { content: ReactNode } | ReactNode | ((hidePopup: () => void) => ReactNode) | 在尾部增加附加内容，会脱离选项流容器，超高度时不会一起滚动，如需在选项中嵌入附加内容，可使用 Select.Extra | ||
| multiple | boolean | 是否多选 | ||
| showSelectAll | boolean | 是否显示全选 | ||
| disabled | boolean | 是否禁用 | ||
| styleType | 'list' | 样式风格 | ||
| renderContent | (value?: Key | Key[], valueChild?: ReactNode[]) => ReactNode | 如何渲染选中项的展示 @param 当前 select 的值@param 当前值对应的展示内容（为性能考虑，只提供前 20 个选项，如果需要获取所有，请自行拿 value 获取） | ||
| renderSelector | (content: ReactNode, visible: boolean) => ReactNode | 自定义渲染选择器 @param 渲染的内容@param 当前的select下拉是否展示 | ||
| renderPopup | ( options: { handleVisible: (visible: boolean) => void; onChange: (v: Key | Key[]) => void; value?: Key | Key[]; /** @ignore */ children?: ReactNode; } & Pick<SelectProps, 'multiple' | 'extra' | 'search' | 'options'> ) => ReactNode | 自定义渲染弹出内容 @param 配置@param 处理弹出层的显示隐藏@param value 变化回调@param select 的当前值 | ||
| search | | true | { /** * 自定义搜索 * @argument searchValue - 搜索的值 * @argument value - option的值 */ handleSearch?: (searchValue: string, value: Key, s: any) => boolean; /** 搜索值 受控 */ searchValue?: string; /** 默认搜索值 非受控 */ defaultSearchValue?: string; /** 搜索值变化回调 */ onSearchValueChange?: (searchValue: string) => void; } | - 是否展示搜索框，可以为 true 或者 Object
- 为 Object 时可传入 handleSearch 对搜索筛选进行自定义 | ||
| size | Size | 'md' | 尺寸 | |
| block | boolean | 展示变更为块占位 | ||
| clearable | boolean | 是否可清空，仅单选可用 | ||
| popover | any | 弹出层的popover props @deprecated 请使用popoverProps替换 | ||
| popoverProps | any | 弹出层的popover props | ||
| customStyle | { /** 列表最大高度 */ optionListMaxHeight?: number | string; /** 弹出菜单的最大宽度 */ popupMaxWidth?: string; /** 弹出菜单的宽度 */ popupWidth?: string; } | 自定义样式 | ||
| emptyContent | ReactNode | 可选性为空时展示内容 | ||
| virtualList | | boolean | { simple?: true; height?: number; } | 启用虚拟列表，仅使用 options 时生效 |
说明
- 这是 Select 组件
- 默认的弹出层容器为 forwardPopupContainer={triggerNode => triggerNode.parentNode}，默认会查找上层的建议容器