fix: select option tootip error, close #5307

Author: tangjinzhou

components/select/index.en-US.md

@@ -42,7 +42,7 @@ Select component to select value from options.
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 3.0 |
 | firstActiveValue | Value of action option by default | string\|string\[] | - |  |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body |  |
-| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false |  |
+| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes, originLabel: any}`, originLabel (3.1) maintains the original type. If the node is constructed through a-select-option children, the value is a function (the default slot of a-select-option) | boolean | false |  |
 | listHeight | Config popup height | number | 256 |  |
 | loading | indicate loading state | Boolean | false |  |
 | maxTagCount | Max tag count to show | number | - |  |

components/select/index.zh-CN.md

@@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 3.0 |
 | firstActiveValue | 默认高亮的选项 | string\|string\[] | - |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body |  |
-| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false |  |
+| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes, originLabel: any}` 的格式, originLabel（3.1） 保持原始类型，如果通过 a-select-option children 构造的节点，该值是是个函数（即 a-select-option 的默认插槽） | boolean | false |  |
 | listHeight | 设置弹窗滚动高度 | number | 256 |  |
 | maxTagCount | 最多显示多少个 tag | number | - |  |
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - |  |

components/vc-select/OptionList.tsx

@@ -136,7 +136,8 @@ const OptionList = defineComponent({
         baseProps.toggleOpen(false);
       }
     };
-    const getLabel = (item: Record<string, any>) => item.label;
+    const getLabel = (item: Record<string, any>) =>
+      typeof item.label === 'function' ? item.label() : item.label;
     function renderItem(index: number) {
       const item = memoFlattenOptions.value[index];
       if (!item) return null;
@@ -275,8 +276,9 @@ const OptionList = defineComponent({
             virtual={virtual}
             v-slots={{
               default: (item, itemIndex) => {
-                const { group, groupOption, data, label, value } = item;
+                const { group, groupOption, data, value } = item;
                 const { key } = data;
+                const label = typeof item.label === 'function' ? item.label() : item.label;
                 // Group
                 if (group) {
                   return (

components/vc-select/Select.tsx

@@ -64,6 +64,7 @@ export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }
 export type RawValueType = string | number;
 export interface LabelInValueType {
   label: any;
+  originLabel?: any;
   value: RawValueType;
   /** @deprecated `key` is useless since it should always same as `value` */
   key?: Key;
@@ -283,7 +284,7 @@ export default defineComponent({
 
       return mergedValues.value.map(item => ({
         ...item,
-        label: item.label ?? item.value,
+        label: (typeof item.label === 'function' ? item.label() : item.label) ?? item.value,
       }));
     });
 
@@ -391,7 +392,15 @@ export default defineComponent({
         (labeledValues.length !== mergedValues.value.length ||
           labeledValues.some((newVal, index) => mergedValues.value[index]?.value !== newVal?.value))
       ) {
-        const returnValues = props.labelInValue ? labeledValues : labeledValues.map(v => v.value);
+        const returnValues = props.labelInValue
+          ? labeledValues.map(v => {
+              return {
+                ...v,
+                originLabel: v.label,
+                label: typeof v.label === 'function' ? v.label() : v.label,
+              };
+            })
+          : labeledValues.map(v => v.value);
         const returnOptions = labeledValues.map(v =>
           injectPropsWithOption(getMixedOption(v.value)),
         );
@@ -426,10 +435,12 @@ export default defineComponent({
     const triggerSelect = (val: RawValueType, selected: boolean) => {
       const getSelectEnt = (): [RawValueType | LabelInValueType, DefaultOptionType] => {
         const option = getMixedOption(val);
+        const originLabel = option?.[mergedFieldNames.value.label];
         return [
           props.labelInValue
             ? {
-                label: option?.[mergedFieldNames.value.label],
+                label: typeof originLabel === 'function' ? originLabel() : originLabel,
+                originLabel,
                 value: val,
                 key: option.key ?? val,
               }

components/vc-select/utils/legacyUtil.ts

@@ -14,7 +14,7 @@ function convertNodeToOption<OptionType extends BaseOptionType = DefaultOptionTy
     children: { default?: () => any };
     key: string | number;
   };
-  const child = children && children.default ? children.default() : undefined;
+  const child = children.default;
   return {
     key,
     value: value !== undefined ? value : key,