antd的select选择框选项如何水平横向排列?选项如何是图片?
最近遇到需求select选择框选项和值为图片,且选项必须水平排列,项目用的是antd,索性就从修改样式入手改改antd

,有啥问题欢迎留言一起讨论

先看效果

xuehuayu.cn

分析

查看antd的文档,使用optionLabelProp属性

实现

Select标签添加optionLabelProp属性,指定显示内容为label属性

1
2
3
4
5
6
7
8
9
<Select
optionLabelProp="label"
>
<Select.Option value="auto" label={<CustomIcon type='auto'/>}> // CustomIcon 为自定义图片组件
<div style={{ position: 'relative', height: 45 }}>
<CustomIcon type="auto"/>
</div>
</Select.Option>
</Select>

相关链接