zent
Version:
一套前端设计语言和基于React的实现
57 lines (49 loc) • 8.11 kB
Markdown
---
title: Select
subtitle: 下拉选择
path: component/select
group: 信息录入
---
## Select 下拉选择
可支持面板选取单个或多个值的选择器，最终录入对应值。
### API
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ | --------------------------- | -------- |
| options | 选项数据 | `Item[]` | `[]` | 是 |
| value | 选中的值，当为 tags 类型时，可以传入数组 | `Item` \| `Item[]` | `null` | 否 |
| size | select的width | `xs` `s` `m` `l` `xl` | s | 否 |
| disabled | 禁用组件 | `boolean` | `false` | 否 |
| placeholder | 默认提示文案 | `string` | `'请选择'` | 否 |
| notFoundContent | 空列表提示文案 | `string` | `'没有找到匹配项'` | 否 |
| onChange | 选择变更后的回调函数 | `(value: Item \| null) => void` \| `(value: Item[]) => void` | `noop` | 否 |
| filter | 过滤条件，设置以后才会开启过滤功能 | `((keyword: string, item: Item) => boolean)` \| `false` | `noop` | 否 |
| highlight | 对搜索结果进行高亮 | `(keyword: string, item: Item) => Item` | `noop` | 否 |
| className | 可选，自定义 trigger 额外类名 | `string` | `''` | 否 |
| width | 输入框宽度 | `string` \| `number` | `''` | 否 |
| popupWidth | 弹层宽度 | `string` \| `number` | 和触发器宽度一致 | 否 |
| multiple | 是否多选 | `boolean` | `false` | 否 |
| collapsable | 多选时是否折叠进行单行显示 | `boolean` | `false` | 否 |
| hideCollapsePop | 多选折叠模式下隐藏展示数据的气泡 | `boolean` | `false` | 否 |
| collapseAt | 多选折叠模式下显示的数据 | `number` | `1` | 否 |
| clearable | 显示清除按钮 | `boolean` | `true` | 否 |
| loading | 是否加载中 | `boolean` | `false` | 否 |
| creatable | 允许创建不存在的项 | `boolean` | `false` | 否 |
| onCreate | 创建新选项的回调函数 | `(keyword: string) => Promise<void>` | | 否 |
| isValidNewOption | 基于当前的输入判断是否显示点击新建，默认不区分大小写进行文字全匹配 | `(keyword: string, options: Item) => boolean` | | 否 |
| keyword | 搜索的关键词 | `string` | `''` | 否 |
| onKeywordChange | 搜索关键词变更后的回调函数 | `(keyword: string, meta: ISelectKeywordChangeMeta) => void` | `noop` | 否 |
| isEqual | 比较两个选项是否相等 | `(a: Item, b: Item) => boolean` | `(a, b) => a.key === b.key` | 否 |
| inline | 是否行内展示 | `boolean` | `false` | 否 |
| open | 是否展示浮层 | `boolean` | `false` | 否 |
| onOpenChange | 打开状态变更后的回调函数 | `(open: boolean) => void` | `noop` | 否 |
| renderValue | 渲染输入框中选项值 | `(item: Item) => ReactNode` | | 否 |
| renderTagList | 仅在多选模式可用；渲染输入框中已选择的选项列表 | `(props: ISelectTagListProps) => React.ReactNode` | | 否 |
| renderOptionList | 渲染选项列表 | `(options: Items[], renderOption) => ReactNode` | | 否 |
| renderOptionContent | 渲染浮层中的每一项 | `(option: Item) => ReactNode` | | 否 |
| disableSearch | 关闭搜索功能 | `boolean` | `false` | 否 |
| renderCollapsedContent | 多选且有折叠 tags 时，自定义渲染浮层内容 | `(collapsedValue: Item[]) => ReactNode` | | 否 |
### `Select.reviveValue`
`reviveValue` 仅可用于受控模式下，一般是表单内数据需要从服务器回填并且选项列表是动态从服务器加载的场景。接受 3 种类型的参数：
- 函数：`(item: ISelectItem) => ISelectItem | null` 返回非 `null` 值将使用该值替换原来的值
- 对象：`{ key: K; [k: string]: unknown; }` 按对象字面值做全等比较，使用选项数组中第一个匹配的值替换原来的值
- 其他（数字/字符串）：等价于 `{ key: K }` 的对象形式