@hi-ui/check-select v4.4.3
CheckSelect 多项选择器
选择器是一种接收数据的容器,为用户提供选择一部分数据的能力。
何时使用
需要从大量的离散型数据中选择一部分时使用
备选项数量 5 个以上时
不需要将全部备选项都展示给用户时
使用示例
Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 下拉框选项数据源 | DataItem[] | groupDataItem[] | - | - |
fieldNames | 设置 data 中 id, title, disabled, children 对应的 key | object | - | { title: 'title', id: 'id',disabled:'disabled', children: 'children'} |
dataSource | 关键词搜索时,触发异步下拉框选项数据源 | DataSource (keyword: string) => (DataSource | DataItem | Promise) | - | - |
value | 被选中项的值 | ReactText[] | - | - |
defaultValue | 默认被选中项的值 | ReactText[] | - | - |
showCheckAll | 是否显示全选,只对多选生效 | boolean | true | false | false |
showJustSelected | 是否显示仅看已选,只对多选生效 (3.0 新增) | boolean | true | false | false |
searchable | 是否可以筛选 | boolean | true | false | false |
filterOption | 第一个参数为输入的关键字,第二个为数据项,返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | (keyword: string, item: DataItem) => boolean | - |
clearable | 是否可以清空 | boolean | true | false | true |
disabled | 是否禁用 | boolean | true | false | false |
placeholder | 输入框占位 | string | - | '请选择' |
searchPlaceholder | 搜索输入框占位 | string | - | '搜索' |
emptyContent | 设置选项为空时展示的内容 | ReactNode | - | '无匹配数据' |
loadingContent | 设置加载中时展示的内容 | ReactNode | - | '数据加载中...' |
optionWidth | 自定义下拉选项宽度 | number | - | |
renderExtraFooter | 自定义下拉菜单底部渲染 | () => ReactNode | - | 无内容 |
overlayClassName | 下拉根元素的类名称 | string | - | - |
onOverlayScroll | 下拉列表滚动时的回调 | function | - | - |
overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps | - | - |
render | 自定义渲染节点的 title 内容径 | (item: CheckSelectItemEventData, keyword: string) => React.ReactNode | - | |
displayRender | 自定义选择后展示的内容 | (selectedItems: DataItem[]) => string | - | - |
注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 CheckSelect,请尝试使用
overlay={ container: triggerNode.parentElement }
将下拉弹层渲染节点固定在触发器的父元素中。
Events
名称 | 说明 | 类型 | 参数 | 返回值 |
---|---|---|---|---|
onChange | 改变选项时触发函数 | (selectedIds: string[], changedItems: DataItem[], afterChangedItems: DataItem[]) => void | selectedIds: 所有选中项的 id 集合 changedItem: 变更的选项集合 afterChangedItems:变更后的选项集合 | - |
Type
groupDataItem
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
groupId | 下拉选项组唯一 id | string | number | - | - |
groupTitle | 下拉选项组标题 | string | - | - |
children | 分组的时候使用 | DataItem[] | - | - |
DataItem
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
id | 下拉选择项唯一值 | ReactText | - | - |
title | 下拉选择项标题 | string | - | - |
disabled | 是否禁用 | boolean | true | false | false |
CheckSelectItemEventData
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
id | 选择项值 | string | - | - |
title | 选择项 | string | - | - |
disabled | 是否禁用 | boolean | true | false | false |
raw | 原始数据,包括约定模型之外的数据 | object | - | - |
checked | 节点是否被选中 | boolean | true | false | - |
focused | 节点是否被聚焦 | boolean | true | false | - |
DataSource
继承 Axios 的 api
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
url | 请求的 url | string | - | - |
method | 请求方法 | string | get | post | get |
data | post 请求时请求体参数 | object | - | - |
params | url 查询参数 | object | - | - |
headers | 请求头 | object | - | - |
withCredentials | 上传请求时是否携带 cookie | boolean | true | false | false |
transformResponse | 成功时的回调,用于对数据进行预处理 | (response: object) => DataItem[] | - | - |
error | 请求发生异常的回调方法 | (error: object) => void | - | - |
CHANGELOG
从 Select 组件抽离多选模式出来,作为为单独 CheckSelect 组件。
参数 | 变更类型 | 变更内容 | 解决的问题 |
---|---|---|---|
propName | feature | deprecated | update | 变更了什么 | 之前是什么样子,解决什么问题 |
---- | ---- | ---- | ---- |
value | update | 类型 string[] => string[] | number[] | 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持) |
defaultValue | update | 类型 string[] => string[] | number[] | 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持) |
id | update | 类型 string => string | number | 对于表单控件 id 值的控制,均使用 React.ReactText(即 string 和 number 都支持) |
bordered | deprecated | 字段 bordered => appearance | 对于 Picker 类型的组件,统一使用 appearance 设置外形(线\面\无边框)值 |
searchPlaceholder | feature | - | Picker 类型组件统一支持 |
loadingContent | feature | - | Picker 类型组件统一支持,适配新 UI |
overlay | feature | - | Picker 类型组件统一支持,聚合管理。比如: placement setOverlayContainer 等,之前有的加了有的没加 |
virtual | feature | - | 支持虚拟列表 |
height | feature | - | 支持虚拟列表 |
itemHeight | feature | - | 支持虚拟列表 |
type | deprecated | - | 拆分单选多选组件单独维护 |
autoload | deprecated | - | 页面级首次渲染执行数据加载操作,取消内置 |
onSearch | deprecated | - | 使用 dataSource 替代,功能重合 |
appearance | feature | - | 统一支持:线性\面性\无边框 |
displayRender | feature | - | 统一支持选择后内容自定义渲染 |
setOverlayContainer | deprecated | - | 使用 overlay.container 替代,功能重合 |
showOnlyShowChecked | update | showJustSelected -> showOnlyShowChecked | 规范命名 |
18 days ago
27 days ago
1 month ago
2 months ago
2 months ago
6 months ago
7 months ago
6 months ago
6 months ago
8 months ago
5 months ago
6 months ago
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago