antd之Select组件mode属性使用

最新推荐文章于 2024-05-07 17:52:35 发布
最新推荐文章于 2024-05-07 17:52:35 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： 使用antd的疑难杂症 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/all_might1/article/details/109494688
版权

最近忙的飞起，好久没写文章了，偷得浮生半小时闲，写个最近发现的有趣的antd属性吧

官方文档对mode属性的描述

 

有趣的是mode中的tags选项

如果将mode设置为tags的话，输入的内容会变成下拉框中的一个标签

 

如下图：输入内容（原本下拉框中是没有这个选项的，输入后选择就自动添加到下拉框中）

选择，在下拉框中就能出现这个选项了 

 

而且输入用逗号分隔的内容也是自动变成下拉框中的标签

还蛮有趣的，个人猜测是通过识别逗号进行分割再将其变成标签

 

 

Fliessenn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
Vue页面antd select多选模式下（mode=“multiple“），点击框外下拉选项无法收起的问题完美解决
灿灿大王搭建的黄金屋
11-19 7581
<a-select class="w260" allowClear :maxTagTextLength="maxTagTextLength" mode="multiple" :open="isOpen" @focus="isOpenFocus" @ch...
antd中Select组件mode=tags的坑
zyh_haha的博客
05-09 9061
本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~ 项目使用 antd 开发前端组件，在使用 Select 时，mode=tags，出现了以下报错 Uncaught Error: must set key for <rc-animate> children at Anima...
完美实现 AntDesign select 回显
最新发布
pig_ning的博客
05-07 459
完美实现 AntDesign select 回显
vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数
XSL_HR的博客
03-27 5555
往期知识调用（步骤不懂就看这儿）
antd Select组件mode=“multiple“ 限制选中个数
agua001的博客
05-31 3411
antd Select组件mode="multiple" 限制选中个数
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
weixin_44912745的博客
08-26 2249
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
Antd Select多选时，限制最大选择数
m0_45219210的博客
01-06 2130
Antd Select多选时，限制最大选择数
设置antDesign的select组件只选中一个
程展威的博客
08-03 2674
通过在select外面包一层Form，然后通过ref指定form，并使用方法this.formRef.curren.resetFields()，重置表单，并更改控制上面标签显示的变量值即可(当然为什么要使用ref来实现呢，具体antd上面已经给说明了，class组件只能用ref，而函数组件则使用useForm)，antd上class组件和函数组件使用说明及代码如下，......
antd-virtual-select:长列表优化antd select组件
05-12
设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} 属性可成为支持大数据渲染的 AutoComplete 组件 更多 antd 长列表渲染性能问题讨论可查看 antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x...
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，...使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> 套卷名称> <Select defaultValue={packag
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
【React工作记录八】如何限制ant design的input只能输入数字
geyaoisnice的博客
12-16 2375
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 今天在找到我 这边我们有一个bug需要处理一下 就是输入框里面不可以输入数字 只能输入文字 <Form.Item label={item.label || ''} {...formItemLayout}> {get
vue 文本输入框只允许输入字母、数字、不允许输入特殊字符
热门推荐
^_^
08-31 2万+
一、基本结构 <input type="text" v-model="note" maxlength="18"> <script> export default { data () { return { note: '', } } } </script> 二、监听表单输入的内容 watch: { // 只允许输入字母 note (newValue, oldValue) { console.l..
antd里面select组件mode为tags时，输入重复按回车键做保留处理
weixin_44205785的博客
08-18 2570
解决用户在重复输入内容时，按下回车删除操作
解决antd Select选择器空标签输入
希望我快乐
03-02 1131
antd选择器空标签
【AndV】ant-design-vue中select使用mode=“combobox“无效:
SunPeng的博客
08-11 868
Warning: [antdv: Select] The combobox mode of Select is deprecated,it will be removed in next major version,please use AutoComplete instead
antd-react 3.26.12版本Select选择器多选模式下，模糊搜索下拉框不展示输入的内容
Kf_loseHair的博客
06-25 800
出现问题mode="tags"时候， 下拉框会展示输入的内容 解决方案： 将tags改为multiple
【react】【antd】自定义下拉选择框，多选，选择结果逗号隔开
jiujiujiujiu_的博客
02-18 3940
【react】【antd】自定义下拉选择框，多选，选项逗号隔开 部分代码如下： state = { isDutyDeptShow: false, //是否显示事业部责任处室下拉框 dutyDeptArr: [] } onDutyDeptClick = () => { this.setState({ isDutyDeptShow: true }) } onDutyDeptBlur = () => {
antd的select的mode="multiple"
06-06
antd的Select组件的mode属性设置为"multiple"时，表示可以选择多个选项。用户可以通过按住Ctrl键多选或者按住Shift键选择两个选项之间的所有选项。同时，当mode设置为"multiple"时，组件的value属性应该设置为一个数组，表示已经选中的选项。例如： ```javascript import { Select } from 'antd'; const { Option } = Select; function handleChange(value) { console.log(`Selected: ${value}`); } <Select mode="multiple" style={{ width: '100%' }} onChange={handleChange}> <Option key="1">Option 1</Option> <Option key="2">Option 2</Option> <Option key="3">Option 3</Option> <Option key="4">Option 4</Option> <Option key="5">Option 5</Option> <Option key="6">Option 6</Option> </Select> ``` 上面的代码演示了一个Select组件，设置mode属性为"multiple"，并且定义了一个handleChange函数用于处理选项的变化。当用户选择一个或多个选项时，handleChange函数会被调用，并且会输出所选中的选项的value值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值