Select 选择器

选择器是一种接收数据的容器，为用户提供选择一部分数据的能力。

何时使用

需要从大量的离散型数据中选择一部分时使用

备选项数量 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 | void) | - | - | | value | 被选中项的值 | ReactText | - | - | | defaultValue | 默认被选中项的值 | ReactText | - | - | | 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 | - | - | | popper | 自定义控制弹出层 popper 行为 | Omit<PopperProps, 'visible' | 'attachEl'> | - | - | | render | 自定义渲染节点的 title 内容径 | (item: CheckSelectItemEventData) => React.ReactNode | - | | displayRender | 自定义选择后展示的内容 | (selectedItem: CheckSelectItemEventData) => string | - | - |

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 CheckSelect，请尝试使用 popper={ container: triggerNode.parentElement } 将下拉弹层渲染节点固定在触发器的父元素中。

Events

| 名称 | 说明 | 类型 | 参数 | 返回值 | | -------- | ------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------ | ------ | | onChange | 改变选项时触发函数 | (selectedId: ReactText, changedItem: DataItem, shouldChecked: boolean) => void | selectedId: 选中项的 id changedItem: 变更的选项 | - |

Type

groupDataItem

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ----------------- | ---------------- | ------ | ------ | | groupId | 下拉选项组唯一 id | string | number | - | - | | groupTitle | 下拉选项组标题 | string | - | - | | children | 分组的时候使用 | DataItem[] | - | - |

DataItem

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------- | --------- | ------------- | ------ | | id | 下拉选择项唯一 id | ReactText | - | - | | title | 下拉选择项标题 | string | - | - | | disabled | 是否禁用 | boolean | true | false | false |

CheckSelectItemEventData

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------------------------------- | ------- | ------------- | ------ | | id | 选择项值 | string | - | - | | title | 选择项 | string | - | - | | disabled | 是否禁用 | boolean | true | false | false | | raw | 原始数据，包括约定模型之外的数据 | object | - | - | | selected | 节点是否被选中 | 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

| 参数 | 变更类型 | 变更内容 | 解决的问题 | | ------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | 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 | | popper | feature | - | Picker 类型组件统一支持，聚合管理。比如： placement，之前有的加了有的没加 | | virtual | feature | - | 支持虚拟列表 | | height | feature | - | 支持虚拟列表 | | itemHeight | feature | - | 支持虚拟列表 | | type | deprecated | - | 拆分单选多选组件单独维护 | | autoload | deprecated | - | 页面级首次渲染执行数据加载操作，取消内置 | | onSearch | deprecated | - | 使用 dataSource 替代，功能重合 | | appearance | feature | - | 统一支持：线性\面性\无边框 | | displayRender | feature | - | 统一支持选择后内容自定义渲染 | | setOverlayContainer | deprecated | - | 使用 popper.container 替代，功能重合 | | onChange | update | 类型：(selectedIds: string[], changedItem: DataItem, changedItems:DataItem[]) => void -> (selectedId: ReactText, changedItem: DataItem) => void | 1. 移除数组结构，方便用户获取；2. 暴露 shouldSelected 执行相应拦截之类的操作 |