kingdee / kdesign

An enterprise-class React UI components library
https://react.kingdee.design/
Apache License 2.0
107 stars 44 forks source link

[select] 多选模式下设置optionLabelProp不生效 #855

Closed kobehhh closed 1 month ago

kobehhh commented 1 month ago

重现链接或代码

import React from 'react'
import ReactDOM from 'react-dom'
import { Select } from '@kdcloudjs/kdesign'

const Demo: React.FC = () => {
  const { Option } = Select
  const options = [
    {
      children: '苹果',
      value: 'apple',
      showLabel: '11111',
    },
    {
      children: '橘子',
      value: 'orange',
      showLabel: '11111',
    },
    {
      children: '葡萄',
      showLabel: '11111',
      value: 'grape',
    },
    {
      children: '柠檬',
      value: 'lemon',
    },
    {
      children: '西瓜',
      value: 'watermelon',
    },
    {
      children: '草莓',
      value: 'strawberry',
      showLabel: '11111',
    },
    {
      children: '香蕉',
      value: 'banana',
    },
    {
      children: '哈密瓜',
      value: 'cantaloupe',
    },
    {
      children: '菠萝',
      value: 'pineapple',
    },
    {
      children: '蓝莓',
      value: 'blueberry',
    },
  ]
  const handleChange = (value) => {
    console.log(value)
  }
  const style = {
    width: 230,
  }

  return (
    <>
      <Select
        placeholder="请输入名称"
        mode="multiple"
        defaultValue={['apple', 'strawberry']}
        style={style}
        maxTagCount={1}
        borderType="bordered"
        optionFilterProp="children"
        optionLabelProp={'showLabel'}
        onChange={(...a) => console.log('change', a)}
        onSelect={(...a) => console.log('onSelect', a)}>
        {options.map((item) => {
          return (
            <Option value={item.value} key={item.value} showLabel={item.showLabel}>
              {item.children}
            </Option>
          )
        })}
      </Select>
    </>
  )
}

ReactDOM.render(<Demo />, mountNode)

重现问题步骤

期望的结果是什么

选中一项后回填到输入框的值为该项对应的optionLabelProp的值

实际的结果是什么

组件库版本号、浏览器信息

组件库与浏览器均为最新版本