antd的select选择框的值如何设置为图片

Apr 8, 2020 | 原创 | 前端 | 阅读 | 206 字 | 1 分钟

条评论

antd的select选择框选项如何水平横向排列？选项如何是图片？
最近遇到需求select选择框选项和值为图片，且选项必须水平排列，项目用的是antd，索性就从修改样式入手改改antd
有啥问题欢迎留言一起讨论

先看效果

xuehuayu.cn

分析

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

实现

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

<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>

相关链接

本文作者：雪花雨
本文链接：https://xuehuayu.cn/2020/04/08/antd%E7%9A%84select%E9%80%89%E6%8B%A9%E6%A1%86%E7%9A%84%E5%80%BC%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E4%B8%BA%E5%9B%BE%E7%89%87.html
版权声明：① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，如有侵权，请联系我。

原创