antd select label 和下拉label不一致实现

青旅半醒 2022-03-18 07:16 547阅读 0赞

### antd select label 和下拉label不一致实现 ###

*   *  正常的形式
     *  要实现这种效果呢？
     *  代码如下

## 正常的形式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

## 要实现这种效果呢？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]

## 代码如下 ##

[codepen链接][codepen]

const {  Select } = antd;
    
    const Option = Select.Option;
    
    const children = [];
    for (let i = 10; i < 36; i++) { 
      children.push(<Option key={ i.toString(36) + i}>             { i.toString(36) + i}
        <span className="select-inner-ignore">---this is details</span></Option>);
    }
    
    function handleChange(value) { 
      console.log(`selected ${ value}`);
    }
    
    ReactDOM.render(
      <Select
        mode="tags"
        style={ {  width: '20%' }}
        onChange={ handleChange}
        tokenSeparators={ [',']}
      >
        { children}
      </Select>,
      mountNode
    );

.ant-select .select-inner-ignore { 
      display: none;
    }

thanks

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220318/37703279b2304df3aa619b9b94d927c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]: /images/20220318/7e65ad7dedca41e9b9dfd6efb888b881.png
[codepen]: https://codepen.io/wwr1234567/pen/aXMzPb

发表评论取消回复

表情：

评论列表（有 0 条评论，547人围观）

还没有评论，来说两句吧...

相关阅读

相关 label-col与wrapper-col、vue页面监听、下拉框获取label

1、Ant 表单中label-col和wrapper-col :label-col='{span:5, offset:1}' :wrapper-col='{span:

水深无声/ 2023年09月27日 11:58/ 0 赞/ 66 阅读

相关 label-position不生效

本来想向右对齐。结果不生效： ![在这里插入图片描述][20210712172337702.png] 解决办法： lable-position 和 label-w

我就是我/ 2023年01月23日 02:59/ 0 赞/ 262 阅读

相关 vue基于elementUI下拉Select同时获取value和label的值

[https://blog.csdn.net/qq\_33592641/article/details/107245334][https_blog.csdn.net_qq_33

￡神魔★判官ぃ/ 2023年01月02日 03:19/ 0 赞/ 11 阅读

相关 vue基于element-ui select下拉框获取value和label的值

[https://www.jianshu.com/p/a2b593b15509][https_www.jianshu.com_p_a2b593b15509] [https:/

深藏阁楼爱情的钟/ 2022年11月12日 09:44/ 0 赞/ 114 阅读

相关 label包裹input，点击label，label响应两次

一、label和input合作的两种形式来自 [W3C][] > The label element represents a caption in a user i

小灰灰/ 2022年09月21日 13:26/ 0 赞/ 219 阅读

相关 vue下拉框向后台同时传value和label值

<el-table-column label="供应商" width="200" header-align="center" align="center">

小灰灰/ 2022年09月08日 06:17/ 0 赞/ 199 阅读

相关 Java Label

在Java中“\{”和“\}”组成一个代码块（code block），如我们最常用到的static代码块，而每个代码块都可以用一个Label，Label不是Java中的关键字，

末蓝、/ 2022年08月23日 00:52/ 0 赞/ 130 阅读

相关 element-ui select 获取label

网上较多的做法都是通过数组的find()方法,找到对象,再取出label.如果数组长度很大,会影响效率. 这里记录下另一种方法 <body> <d

向右看齐/ 2022年03月22日 10:10/ 0 赞/ 293 阅读

相关 antd select label 和下拉label不一致实现

antd select label 和下拉label不一致实现正常的形式要实现这种效果呢？代码如下正常的形式 ![

青旅半醒/ 2022年03月18日 07:16/ 0 赞/ 548 阅读

相关 C# Label和LinkLabel

在 Windows 窗体应用程序中，标签控件王要分为普通的标签 (Label) 和超链接形式的标签 (LinkLabel) 。普通标签 (Label) 和

曾经终败给现在/ 2022年01月20日 14:37/ 0 赞/ 132 阅读