3.8 KiB
OptionGroup 选择组
:::tip
Option is required to be used within Select, Dropdown or other OptionGroup, and can be used with Option.
:::
Demos
See the demos of Select or the demos of Dropdown.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
label |
string |
The descriptive label of the option group. | |
options |
Array<Object> |
[] |
[^options] |
position |
string |
inline |
[^position] |
overlay-class |
`string | Array | Object=` |
overlay-style |
`string | Array | Object=` |
^^^options
The list of options with the option type being {label, value, disabled, ...}.
+++Properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of the option. |
value |
* |
The value of the option. |
disabled |
boolean= |
Whether the option is disabled. |
| +++ | ||
| ^^^ |
^^^position The way to display child options.
+++Enum values
| Value | Description |
|---|---|
inline |
Displays child options inline. |
popup |
Displays child options in a separate popup menu. |
| +++ | |
| ^^^ |
Slots
| Name | Description |
|---|---|
default |
The content of the options dropdown. Can be used to place Options or OptionGroupss when the options prop is not specified. |
label |
[^slot-label] |
group-label |
[^slot-group-label] |
option-label |
[^slot-option-label] |
option |
[^slot-option] |
^^^slot-label
The label of the option group. Displays the label prop by default.
+++Scope properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of the option group. |
disabled |
boolean= |
Whether the option group is disabled. |
| +++ | ||
| ^^^ |
^^^slot-group-label
The label text of each option group (option with child options). Displays the label of the option by default.
+++Scope properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of the option group. |
disabled |
boolean= |
Whether the option group is disabled. |
| +++ |
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.
^^^
^^^slot-option-label
The label text of each option (option without child options). Displays the label of the option by default.
+++Scope properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of the option. |
value |
* |
The value of the option. |
selected |
boolean |
Whether the the option is selected. |
disabled |
boolean= |
Whether the option is disabled. |
| +++ |
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.
^^^
^^^slot-option
The entire content area of each option (option without child options). Displays the default content of Options component by default.
+++Scope properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of the option. |
value |
* |
The value of the option. |
selected |
boolean |
Whether the the option is selected. |
disabled |
boolean= |
Whether the option is disabled. |
| +++ |
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via v-bind.
^^^
Icons
| Name | Description |
|---|---|
expandable |
Expandable options. |