feat: add optionLabel slot

Author: tangjinzhou

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 (
-        <Select {...selectProps} v-slots={{ option: slots.option }}>
+        <Select {...selectProps} v-slots={omit(slots, ['default', 'dataSource', 'options'])}>
           {optionChildren}
         </Select>
       );

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<BaseSelectRef>();
@@ -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}
         ></RcSelect>
       );

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<string, any>) => 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}

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<SelectorProps>({
         activeDescendantId,
         open,
         tabindex,
+        optionLabelRender,
         onInputKeyDown,
         onInputMouseDown,
         onInputChange,
@@ -125,7 +128,7 @@ const SingleSelector = defineComponent<SelectorProps>({
         //   titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
         // }
       } else {
-        titleNode = item?.label;
+        titleNode = optionLabelRender && item ? optionLabelRender(item.option) : item?.label;
       }
       return (
         <>

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<string, any>) => VueNode;
 
   /** Check if `tokenSeparators` contains `\n` or `\r\n` */
   tokenWithEnter?: boolean;
@@ -100,6 +101,7 @@ const Selector = defineComponent<SelectorProps>({
     maxTagTextLength: PropTypes.number,
     maxTagPlaceholder: PropTypes.any,
     tagRender: PropTypes.func,
+    optionLabelRender: PropTypes.func,
 
     /** Check if `tokenSeparators` contains `\n` or `\r\n` */
     tokenWithEnter: PropTypes.looseBool,