eo-select
<eo-select>Alias:
<form.general-select>表单下拉选择构件。
Examples
Label
Value
Options
Disabled
Multiple
Tags
Placeholder
Suffix
GroupBy
caption 展示下拉候选项说明文案
Fields
UseBackend
Input Style
Event
With Form
Properties
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
name | 字段名称 | string | ||
placeholder | 占位说明 | string | ||
label | 字段文本 | string | ||
options | 选项列表 | GeneralComplexOption[] | ✅ | |
value | 值 | any | ||
required | 是否必填 | boolean | ||
message | 校验文本信息 | Record<string, string> | ||
disabled | 是否禁用 | boolean | ||
mode | 类型 | "tags" | "multiple" | ||
tokenSeparators | 自动分词的分隔符，仅在 mode="tags" 时生效 | string[] | ||
maxTagCount | 最多显示多少个 tag, 剩余的 tag 将被隐藏 | number | ||
groupBy | 分组字段 | string | ||
suffix | { useBrick: UseSingleBrickConf } | |||
clearable | 是否支持清除 | boolean | true | |
fields | 列表指定字段作为 label 和 value | { label?: string; value?: string } | ||
useBackend | 后端搜索 | UseBackendConf | ||
debounceSearchDelay | 设置时，同时对 useBackend 和 search 事件进行防抖。 未设置时，useBackend 有默认的 300ms 防抖。 | number | ||
inputStyle | 输入框样式 | React.CSSProperties | ||
dropdownStyle | 下拉框样式 | React.CSSProperties | ||
dropdownHoist | 下拉框是否使用固定定位防止内容被裁切 | boolean | ||
themeVariant | 主题变体 | "default" | "elevo" |
Events
| Name | Description | Event Detail |
|---|---|---|
change | 下拉选择事件 | ChangeEventDetail |
change.v2 | 下拉选择事件 v2（仅传递选中的值） | string | string[] - 选中的值 |
search | 下拉框search事件 | SearchEventDetail |
select.focus | 下拉框focus事件 注：之前事件类型为 "focus"，这和原生事件冲突，可能导致多次触发，现改为 "select.focus" | void |
options.change | 选项列表变化事件 | OptionsChangeEventDetail |
Type references
GeneralComplexOption
<T = string | number | boolean>| Name | Description | Type | Default | Required |
|---|---|---|---|---|
label | string | ✅ | ||
value | T | ✅ | ||
caption | string | |||
emoji | string | |||
[key: string] | any |
UseBackendConf
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
provider | string | ✅ | ||
args | any[] | ((...args: any[]) => any[]) | ✅ | ||
transform | (data: any) => void |
ChangeEventDetail
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
value | string | string[] | ✅ | ||
options | GeneralComplexOption[] | ✅ |
SearchEventDetail
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
value | string | ✅ |
OptionsChangeEventDetail
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
options | { label: string; value: any; [key: string]: any } | ✅ | ||
name | string | ✅ |