docs_vue2/one/docs/en-US/components/option-group.md

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.