From e38e59d05a1b70616b60b32ce7e4c426435bcdaf Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 3 Nov 2021 16:24:35 +0800
Subject: [PATCH] fix: multipe select can not separator content, #4844

---
 components/_util/props-util/index.js | 7 +++++++
 components/select/index.en-US.md     | 2 +-
 components/select/index.zh-CN.md     | 2 +-
 components/vc-select/generate.tsx    | 3 ++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/_util/props-util/index.js b/components/_util/props-util/index.js
index 8a76d49bc..7149ebc45 100644
--- a/components/_util/props-util/index.js
+++ b/components/_util/props-util/index.js
@@ -396,6 +396,13 @@ function isValidElement(element) {
 function getPropsSlot(slots, props, prop = 'default') {
   return props[prop] ?? slots[prop]?.();
 }
+
+export const getTextFromElement = ele => {
+  if (isValidElement(ele) && isStringElement(ele[0])) {
+    return ele[0].children;
+  }
+  return ele;
+};
 export {
   splitAttrs,
   hasProp,
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 7b5f80bc2..aeba5afa2 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -45,7 +45,7 @@ Select component to select value from options.
 | mode | Set mode of Select | 'multiple' \| 'tags' | - |  |
 | notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' |  |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |  |
-| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |  |
+| optionLabelProp | Which prop value of option will render as content of select. | string | `children` \| `label`(when use options) |  |
 | placeholder | Placeholder of select | string\|slot | - |  |
 | showSearch | Whether show search input in single mode. | boolean | false |  |
 | showArrow | Whether to show the drop-down arrow | boolean | true |  |
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 067095757..5ca9497c0 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -46,7 +46,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' \| 'combobox' | - |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' |  |
 | optionFilterProp | 搜索时过滤对应的 option 属性，不支持 children | string | value |  |
-| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |  |
+| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` \| `label`(设置 options 时) |  |
 | placeholder | 选择框默认文字 | string\|slot | - |  |
 | showSearch | 使单选模式可搜索 | boolean | false |  |
 | showArrow | 是否显示下拉小箭头 | boolean | true |  |
diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx
index baaa426ec..dcfe22a5b 100644
--- a/components/vc-select/generate.tsx
+++ b/components/vc-select/generate.tsx
@@ -53,6 +53,7 @@ import createRef from '../_util/createRef';
 import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import isMobile from '../vc-util/isMobile';
+import { getTextFromElement } from '../_util/props-util';
 
 const DEFAULT_OMIT_PROPS = [
   'children',
@@ -699,7 +700,7 @@ export default function generateSelector<
             patchRawValues = patchLabels
               .map(label => {
                 const item = mergedFlattenOptions.value.find(
-                  ({ data }) => data[mergedOptionLabelProp.value] === label,
+                  ({ data }) => getTextFromElement(data[mergedOptionLabelProp.value]) === label,
                 );
                 return item ? item.data.value : null;
               })