CheckPicker 多项选择器
用于多项数据选择，支持分组。
<CheckPicker>
获取组件
import { CheckPicker } from 'rsuite';演示
默认
外观
尺寸
置顶已选项
设置 sticky属性， 把选项中已选择的选项置顶在最前面。
撑满
分组
位置
提示：设置为
auto*时， 尝试滚动页面，或者改变浏览器大小，会自动显示在合适的位置。
自定义选项
禁用
禁用搜索框
自定义页脚
自定义一个全选功能
异步
容器与防止溢出
受控
Props
<CheckPicker>
| 属性名称 | 类型(默认值) |
描述 |
|---|---|---|
| appearance | enum: 'default', 'subtle' ('default') |
设置外观 |
| block | boolean | 堵塞整行 |
| classPrefix | string ('picker') |
组件 CSS 类的前缀 |
| cleanable | boolean (true) |
可以清除 |
| container | HTMLElement or (() => HTMLElement) | 设置渲染的容器 |
| data * | Array<DataItemType> | 组件数据 |
| defaultValue | string[] | 设置默认值 非受控 |
| disabled | boolean | 禁用组件 |
| disabledItemValues | string[] | 禁用选项 |
| groupBy | string | 设置分组条件在 data 中的 key |
| labelKey | string ('label') |
设置选项显示内容在 data 中的 key |
| listProps | listprops | react-virtualized 中 List 的相关属性 |
| maxHeight | number (320) |
设置 Dropdown 的最大高度 |
| menuClassName | string | 应用于菜单 DOM 节点的 css class |
| menuStyle | Object | 应用于菜单 DOM 节点的 style |
| onChange | (value:string, event) => void | value 发生改变时的回调函数 |
| onClean | (event:SyntheticEvent) => void | 值清理时触发回调 |
| onClose | () => void | 关闭回调函数 |
| onEnter | () => void | 显示前动画过渡的回调函数 |
| onEntered | () => void | 显示后动画过渡的回调函数 |
| onEntering | () => void | 显示中动画过渡的回调函数 |
| onExit | () => void | 退出前动画过渡的回调函数 |
| onExited | () => void | 退出后动画过渡的回调函数 |
| onExiting | () => void | 退出中动画过渡的回调函数 |
| onGroupTitleClick | (event) => void | 点击分组标题的回调函数 |
| onOpen | () => void | 打开回调函数 |
| onSearch | (searchKeyword:string, event) => void | 搜索的回调函数 |
| onSelect | (value:string, item: DataItemType , event) => void | 选项被点击选择后的回调函数 |
| placeholder | React.Node ('Select') |
占位符 |
| placement | enum: Placement('bottomStart') |
位置 |
| preventOverflow | boolean | 防止浮动元素溢出 |
| renderExtraFooter | () => React.Node | 自定义页脚内容 |
| renderMenu | (menu:React.Node) => React.Node | 自定义渲染菜单列表 |
| renderMenuGroup | (groupTitle:React.Node, item:DataItemType) => React.Node | 自定义选项组 |
| renderMenuItem | (label:React.Node, item: DataItemType) => React.Node | 自定义选项 |
| renderValue | (value: any[], items: any[],selectedElement:React.Node) => React.Node | 自定义被选中的选项 |
| searchBy | (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean | 自定义搜索规则 |
| searchable | boolean (true) |
可以搜索 |
| size | enum: 'lg', 'md', 'sm', 'xs' ('md') |
设置组件尺寸 |
| sort | (isGroup: boolean) => (a: any, b: any) => number | 对选项排序 |
| sticky | boolean | 把选项中已选择的选项置顶在最前面 |
| toggleComponentClass | React.ElementType ('a') |
为组件自定义元素类型 |
| value | string[] | 设置值 受控 |
| valueKey | string ('value') |
设置选项值在 data 中的 key |
| virtualized | boolean (true) |
是否开启虚拟列表 |