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