feat: select support custom option by option slot

Author: tangjinzhou

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?.()}
         </RcSelect>

components/vc-select/OptionList.tsx

@@ -77,6 +77,7 @@ const OptionListProps = {
 const OptionList = defineComponent<OptionListProps, { state?: any }>({
   name: 'OptionList',
   inheritAttrs: false,
+  slots: ['option'],
   setup(props) {
     const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
 
@@ -268,6 +269,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
       setActive,
       onSelectValue,
       memoFlattenOptions,
+      $slots,
     } = this as any;
     const {
       id,
@@ -281,6 +283,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
       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<OptionListProps, { state?: any }>({
           onMouseenter={onMouseenter}
           children={({ group, groupOption, data }, itemIndex) => {
             const { label, key } = data;
-
             // Group
             if (group) {
               return (
                 <div class={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}>
-                  {label !== undefined ? label : key}
+                  {renderOption ? renderOption(data) : label !== undefined ? label : key}
                 </div>
               );
             }
@@ -387,7 +389,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
                 }}
                 style={style}
               >
-                <div class={`${optionPrefixCls}-content`}>{content}</div>
+                <div class={`${optionPrefixCls}-content`}>
+                  {renderOption ? renderOption(data) : content}
+                </div>
                 {isValidElement(menuItemSelectedIcon) || selected}
                 {iconVisible && (
                   <TransBtn

components/vc-select/Select.tsx

@@ -84,6 +84,7 @@ const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
           ref={selectRef}
           {...(props as any)}
           {...attrs}
+          v-slots={slots}
           children={slots.default?.() || []}
         />
       );

components/vc-select/generate.tsx

@@ -340,6 +340,7 @@ export default function generateSelector<
   } = config as any;
   const Select = defineComponent<SelectProps<OptionsType, ValueType>>({
     name: 'Select',
+    slots: ['option'],
     setup(props: SelectProps<OptionsType, ValueType>) {
       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 }}
         />
       );