一般情况下的搜索选择框是,文本展示与value值相同,或者展示的option里的value值与select的value一样展示值在这里插入图片描述
但是我碰到了展示值与我最终要得到的值是不一样的(比如展示:姓名+号码,我需要获取的值是:code(用来下一步操作)),我一开始是这样做的,导致的问题是,选择的时候出现的是(姓名+号码),后面选择展示会变成一整条数据,因为select的value与option的value矛盾了

 <Select
      className={styles['select-style']}
       mode="multiple" 
       placeholder="请选择" 
       notFoundContent={carAuctionFetching ? <Spin size="small" /> : null}
       filterOption={false}
       optionLabelProp="children"
       onChange={handleChange}
       onSearch={getAffiliatedStores}
       value={addListName}
  >
		{inquiryStores.map((d,index) => <Select.Option 
											value={JSON.stringify(d)} 
											disabled={d.relevance} 
											key={index}>
											{d.shortname}({d.numb})
										</Select.Option>)
</Select>在这里插入代码片

最终在select加上api: labelInValue={true},加上input组件,把需要的code值放入input里

 <Select
       className={styles['select-style']}
       mode="multiple" 
       placeholder="请选择" 
       notFoundContent={carAuctionFetching ? <Spin size="small" /> : null}
       filterOption={false}
       labelInValue={true}
       optionLabelProp="children"
       onChange={handleChange}
       onSearch={getAffiliatedStores}
       value={addListName}
   >
		{AffiliatedStores.map((d,index) => <Select.Option 
		                                   key={index}
		                                   value={`${d.shortname}(${d.franchiseStoreCode})`}
		                                   disabled={d.relevance}>
		                                       {`${d.shortname}(${d.franchiseStoreCode})`}
		                                       <input style={{ display: 'none' }} value={d.code} />
                                    </Select.Option>)}
 </Select>在这里插入代码片

最终的code值,我就可以在label中可以取到
在这里插入图片描述

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐