From ec177879aca291fd11db1e1f9eca790e22ded177 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 30 Mar 2022 10:26:27 +0800 Subject: [PATCH] fix: select option tootip error, close #5307 --- components/select/index.en-US.md | 2 +- components/select/index.zh-CN.md | 2 +- components/vc-select/OptionList.tsx | 6 ++++-- components/vc-select/Select.tsx | 17 ++++++++++++++--- components/vc-select/utils/legacyUtil.ts | 2 +- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 41867c322..0205a5da5 100644 --- a/components/select/index.en-US.md +++ b/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 | - | | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 5d456c8c1..46ef2c382 100644 --- a/components/select/index.zh-CN.md +++ b/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) | - | | diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx index e7e8fb763..66b4b8f93 100644 --- a/components/vc-select/OptionList.tsx +++ b/components/vc-select/OptionList.tsx @@ -136,7 +136,8 @@ const OptionList = defineComponent({ baseProps.toggleOpen(false); } }; - const getLabel = (item: Record) => item.label; + const getLabel = (item: Record) => + 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 ( diff --git a/components/vc-select/Select.tsx b/components/vc-select/Select.tsx index 0a7a5fd15..b0f1908aa 100644 --- a/components/vc-select/Select.tsx +++ b/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, } diff --git a/components/vc-select/utils/legacyUtil.ts b/components/vc-select/utils/legacyUtil.ts index f7a58d214..cc3610aa8 100644 --- a/components/vc-select/utils/legacyUtil.ts +++ b/components/vc-select/utils/legacyUtil.ts @@ -14,7 +14,7 @@ function convertNodeToOption any }; key: string | number; }; - const child = children && children.default ? children.default() : undefined; + const child = children.default; return { key, value: value !== undefined ? value : key,