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

最新推荐文章于 2024-05-10 18:43:40 发布
最新推荐文章于 2024-05-10 18:43:40 发布
阅读量3k 收藏
点赞数
分类专栏： react js 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010762099/article/details/105400686
版权
js 同时被 2 个专栏收录
31 篇文章 1 订阅
订阅专栏
react
9 篇文章 0 订阅
订阅专栏

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

先看效果

在这里插入图片描述

分析

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

实现

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

点击查看实现方法

相关链接

xuehuayu.cn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react+antd Radio单选图片样式
gd81325的博客
02-03 1937
<Radio.Group onChange={onChange} value={value}> {radioArr.map(item => ( <div className={classnames(styles.selectEveryBox, styles[item.img])}> <Radio value={item.value}/> </div> ))} </Radio.Group> css :gl.
antd Select自定义下拉选项和回填
chunmeizhang_88的博客
02-08 5957
react antd Select自定义下拉选项和回填option
antd-vue 单选、多选框样式
小白
11-18 1746
antd-vue 单选、多选框样式
基于Antd自定义图标选则组件
最新发布
quan
05-10 128
IconSelect组件是基于 Ant Design 的 ProComponents 开发的一个图标选则组件。
Select 选择器显示内容为icon图标选项（Ant Design of Vue）
qq_45432996的博客
03-26 5008
<template> <div> <a-select size="large" placeholder="请选择图标" style="width: 200px" @change="handleChange"> <a-select-option v-for="i in seleiconlist" :key="i.key" ><a-icon :type="i.value" style="f.
vue.js使用select切换图片
qq_33325959的博客
01-04 2761
div id="app"> div class="pic"> img :src=imgsrc> div> 第1张第2张第3张 option无法添加事件--> select v-model="selected" @change="changeimg(parseInt(selected))"> option value="1">第一张o
利用ant-design下拉选择框select的labelInValue属性给下拉选项添加图标
study_way的博客
10-14 2689
给下拉选项框select添加小图标这个问题，ant-design,labelInvalue属性
vue实现图片的多选功能
weixin_71843395的博客
03-21 970
先设置一个图片选中后的样式，样式名为selected，然后动态添加该样式名字。将后端传回来的数据列表每一项添加一个标记isChoose，判断是否存在该标记。点击同一图片，第一次则加上标记，选中样式生效，并添加到数组列表中。再次点击则去掉标记，选中样式失效，并在数组列表中删除该项。
select标签添加multiple属性后，页面呈现的样式发生改变，如何修改
积累点滴、持续总结、进而成长
03-13 9486
select标签当添加multiple属性后，是指明该下拉框可以进行多选，但是添加上multiple属性后，页面的呈现是样式会发生改变 也就是 页面会将所有的下拉框的值全部展示出来 此时，需要在select标签的内部再次添加属性：size=“” 里面的数值根据select中有几个值而定 这样基本样式可以改变 进行回填的时候，数值也不会再次发生改变 代码如下： select id="
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
解决vue 更改计算属性后select选中值不更改的问题
08-27
解决 Vue 中计算属性更新后 Select 选中值不更新的问题 Vue 是一个流行的前端框架，它提供了强大的计算属性功能，允许开发者根据需求动态计算并更新页面数据。但是，在使用计算属性时，可能会遇到一些意外的问题，...
ant design Select下拉选中后,选中内容可编辑
chenlincc的博客
03-25 3904
ant design 下拉选中选项后输入框可编辑 问题 : 当选择option后,无法编辑选择项 import React,{Component} from "react" import { Select } from 'antd'; const { Option } = Select; class Select extends Component { state = {value...
antd vue 多选框的全选功能实现和选中时候传入值的改变
动感超人的博客
10-28 1685
原理就是监听全选按钮的选中状态,设置相应的回调就可以。indeterminate是什么?
ReactJS+antd+select标签组件（可单选，多选，可将输入项作为选项）
u012891737的专栏
05-26 2928
MySelectTag代码块如下： import React, { useState } from 'react'; import { Select } from 'antd'; /** * @param initialValue 默认值 * @param onChange 值改变时调用方法 * @param isSingle 是否单选 * @param data 选项初始值 * @returns {*} * @constructor */ const MySelectTag = (.
antdv中 改变select颜色的方法
weixin_43814775的博客
01-24 3161
antdv中 改变select颜色的方法 直接进入主题 1. 这是Vue template中的其中模板 <div class="test"> <a-select default-value="lucy" style="width: 120px" @change="handleChange"> <a-select-option value="jack"> Jack </a-select-o
vue脚手架-上传图片 根据下拉框选择到的不同，显示不一样的图片内容（一）
唯心所现，唯识所变
12-11 2393
根据下拉框选择到的内容不同，展示出不一样的图片内容 效果： 此文章分为三部分来梳理： 1、下拉框 2、上传图片 3、两者如何连接起来 该功能使用了element-ui插件来实现，看文章前推荐先去看看官网 ==》 下拉框 、上传图片 go~ 前言：后端传了1-6的数字用来表示不同的数据类型，然后每个类型都有个接口。我的下拉框需要显示这六个图片类型供选择。然后根据下拉框选择的不同来展示对应的图片类型。 思路：下拉框：根据图片类型，把六个类型都显示出来 1、下拉框 <el-form>g
antd select二级联动第一个选择框改变时 清空第二个选择框选择的值
06-03
您可以在第一个选择框的 `onChange` 事件中设置第二个选择框的值为空，代码示例如下： ``` import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const App = () => { const [firstValue, setFirstValue] = useState(''); const [secondValue, setSecondValue] = useState(''); const handleFirstChange = value => { setFirstValue(value); setSecondValue(''); }; const handleSecondChange = value => { setSecondValue(value); }; return ( <div> <Select value={firstValue} onChange={handleFirstChange}> <Option value="1">Option 1</Option> <Option value="2">Option 2</Option> </Select> <Select value={secondValue} onChange={handleSecondChange}> {firstValue === '1' && ( <Option value="a">Option A</Option> )} {firstValue === '2' && ( <Option value="b">Option B</Option> )} </Select> </div> ); }; export default App; ``` 在上面的代码中，我们在第一个选择框的 `onChange` 事件中设置了第二个选择框的值为空。这样，在第一个选择框的值发生变化时，第二个选择框的值就会被清空。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值