fix: multipe select can not separator content, #4844

Author: tangjinzhou

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,

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 |  |

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 |  |

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;
               })