diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index a3ec885a2..236f21d93 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -14,10 +14,10 @@ function isSelectOptionOrSelectOptGroup(child: any): boolean { } const autoCompleteProps = { - ...selectProps(), + ...omit(selectProps(), ['loading', 'mode', 'optionLabelProp', 'labelInValue']), dataSource: PropTypes.array, dropdownMenuStyle: PropTypes.style, - optionLabelProp: PropTypes.string, + // optionLabelProp: PropTypes.string, dropdownMatchSelectWidth: { type: [Number, Boolean], default: true }, }; @@ -38,7 +38,7 @@ const AutoComplete = defineComponent({ choiceTransitionName: PropTypes.string.def('zoom'), autofocus: PropTypes.looseBool, backfill: PropTypes.looseBool, - optionLabelProp: PropTypes.string.def('children'), + // optionLabelProp: PropTypes.string.def('children'), filterOption: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(false), defaultActiveFirstOption: PropTypes.looseBool.def(true), }, @@ -121,19 +121,22 @@ const AutoComplete = defineComponent({ } } - const selectProps = { - ...omit(props, ['dataSource', 'optionLabelProp']), - ...attrs, - mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE, - // optionLabelProp, - getInputElement, - notFoundContent, - // placeholder: '', - class: cls, - ref: selectRef, - }; + const selectProps = omit( + { + ...props, + ...(attrs as any), + mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE, + // optionLabelProp, + getInputElement, + notFoundContent, + // placeholder: '', + class: cls, + ref: selectRef, + }, + ['dataSource', 'loading'], + ); return ( - {optionChildren} ); diff --git a/components/select/index.tsx b/components/select/index.tsx index e5ace89d9..86fe8f28b 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -70,6 +70,7 @@ const Select = defineComponent({ 'placeholder', 'tagRender', 'maxTagPlaceholder', + 'optionLabel', // donot use, maybe remove it ], setup(props, { attrs, emit, slots, expose }) { const selectRef = ref(); @@ -206,6 +207,7 @@ const Select = defineComponent({ transitionName={transitionName.value} children={slots.default?.()} tagRender={props.tagRender || slots.tagRender} + optionLabelRender={slots.optionLabel} maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder} > ); diff --git a/components/vc-select/BaseSelect.tsx b/components/vc-select/BaseSelect.tsx index c7911321f..836996b28 100644 --- a/components/vc-select/BaseSelect.tsx +++ b/components/vc-select/BaseSelect.tsx @@ -157,6 +157,7 @@ export const baseSelectPropsWithoutPrivate = () => { return { showSearch: { type: Boolean, default: undefined }, tagRender: { type: Function as PropType<(props: CustomTagProps) => any> }, + optionLabelRender: { type: Function as PropType<(option: Record) => any> }, direction: { type: String as PropType<'ltr' | 'rtl'> }, // MISC @@ -664,6 +665,7 @@ export default defineComponent({ // Tags tokenSeparators, tagRender, + optionLabelRender, // Events onPopupScroll, @@ -830,6 +832,7 @@ export default defineComponent({ mode={mode} activeDescendantId={activeDescendantId} tagRender={tagRender} + optionLabelRender={optionLabelRender} values={displayValues} open={mergedOpen.value} onToggleOpen={onToggleOpen} diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index b67159a98..8ad26355c 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -9,6 +9,7 @@ import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'; interface SelectorProps extends InnerSelectorProps { inputElement: VueNode; activeValue: string; + optionLabelRender: Function; } const props = { inputElement: PropTypes.any, @@ -28,6 +29,7 @@ const props = { tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), activeValue: PropTypes.string, backfill: PropTypes.looseBool, + optionLabelRender: PropTypes.func, onInputChange: PropTypes.func, onInputPaste: PropTypes.func, onInputKeyDown: PropTypes.func, @@ -98,6 +100,7 @@ const SingleSelector = defineComponent({ activeDescendantId, open, tabindex, + optionLabelRender, onInputKeyDown, onInputMouseDown, onInputChange, @@ -125,7 +128,7 @@ const SingleSelector = defineComponent({ // titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {}); // } } else { - titleNode = item?.label; + titleNode = optionLabelRender && item ? optionLabelRender(item.option) : item?.label; } return ( <> diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index 6fc30878e..11f2dc9c0 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -46,6 +46,7 @@ export interface SelectorProps { maxTagTextLength?: number; maxTagPlaceholder?: VueNode | ((omittedValues: DisplayValueType[]) => VueNode); tagRender?: (props: CustomTagProps) => VueNode; + optionLabelRender?: (props: Record) => VueNode; /** Check if `tokenSeparators` contains `\n` or `\r\n` */ tokenWithEnter?: boolean; @@ -100,6 +101,7 @@ const Selector = defineComponent({ maxTagTextLength: PropTypes.number, maxTagPlaceholder: PropTypes.any, tagRender: PropTypes.func, + optionLabelRender: PropTypes.func, /** Check if `tokenSeparators` contains `\n` or `\r\n` */ tokenWithEnter: PropTypes.looseBool,