antdesign搜索选择框select,需求:展示与真正取值不一致时的处理
antdesign搜索选择框select,需求:展示与真正取值不一致时的处理
·
一般情况下的搜索选择框是,文本展示与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中可以取到
更多推荐
所有评论(0)