diff --git a/components/select/index.tsx b/components/select/index.tsx index 5cce05d0d2..17b278961b 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -76,7 +76,15 @@ const Select = defineComponent({ props: SelectProps(), SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE', emits: ['change', 'update:value'], - slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender'], + slots: [ + 'notFoundContent', + 'suffixIcon', + 'itemIcon', + 'removeIcon', + 'clearIcon', + 'dropdownRender', + 'option', + ], setup(props, { attrs, emit, slots, expose }) { const selectRef = ref(null); @@ -194,6 +202,7 @@ const Select = defineComponent({ dropdownClassName={rcSelectRtlDropDownClassName} onChange={triggerChange} dropdownRender={selectProps.dropdownRender || slots.dropdownRender} + v-slots={{ option: slots.option }} > {slots.default?.()} diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx index a24735d760..0f9330910e 100644 --- a/components/vc-select/OptionList.tsx +++ b/components/vc-select/OptionList.tsx @@ -77,6 +77,7 @@ const OptionListProps = { const OptionList = defineComponent({ name: 'OptionList', inheritAttrs: false, + slots: ['option'], setup(props) { const itemPrefixCls = computed(() => `${props.prefixCls}-item`); @@ -268,6 +269,7 @@ const OptionList = defineComponent({ setActive, onSelectValue, memoFlattenOptions, + $slots, } = this as any; const { id, @@ -281,6 +283,7 @@ const OptionList = defineComponent({ onScroll, onMouseenter, } = this.$props as OptionListProps; + const renderOption = $slots.option; const { activeIndex } = this.state; // ========================== Render ========================== if (memoFlattenOptions.length === 0) { @@ -315,12 +318,11 @@ const OptionList = defineComponent({ onMouseenter={onMouseenter} children={({ group, groupOption, data }, itemIndex) => { const { label, key } = data; - // Group if (group) { return (
- {label !== undefined ? label : key} + {renderOption ? renderOption(data) : label !== undefined ? label : key}
); } @@ -387,7 +389,9 @@ const OptionList = defineComponent({ }} style={style} > -
{content}
+
+ {renderOption ? renderOption(data) : content} +
{isValidElement(menuItemSelectedIcon) || selected} {iconVisible && ( >({ ref={selectRef} {...(props as any)} {...attrs} + v-slots={slots} children={slots.default?.() || []} /> ); diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx index eb65719239..f0049771e7 100644 --- a/components/vc-select/generate.tsx +++ b/components/vc-select/generate.tsx @@ -340,6 +340,7 @@ export default function generateSelector< } = config as any; const Select = defineComponent>({ name: 'Select', + slots: ['option'], setup(props: SelectProps) { const useInternalProps = computed( () => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK, @@ -1093,6 +1094,7 @@ export default function generateSelector< displayValues, activeValue, onSearchSubmit, + $slots: slots, } = this as any; const { prefixCls = defaultPrefixCls, @@ -1204,6 +1206,7 @@ export default function generateSelector< menuItemSelectedIcon={menuItemSelectedIcon} virtual={virtual !== false && dropdownMatchSelectWidth !== false} onMouseenter={onPopupMouseEnter} + v-slots={{ option: slots.option }} /> ); diff --git a/v2-doc b/v2-doc index 6b53258cc2..157cce105e 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 6b53258cc2b3709e070d340714e992760e660e67 +Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93