antd的Select组件的多选模式限制多选数量-2种简易版

最新推荐文章于 2024-08-30 14:34:34 发布
最新推荐文章于 2024-08-30 14:34:34 发布
阅读量2.8k 收藏 7
点赞数 1
文章标签： vue anti-design-vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetyqi/article/details/132189238
版权
本文介绍了两种处理下拉框多选限制的方法：一是当选择超过5个时，不再选中并提示用户，通过监听select或change事件控制数据；二是当选择满5个后，其他选项禁用，需用户取消才能增加新的选择，利用optionprops的disabled属性管理。
摘要由CSDN通过智能技术生成

场景：下拉框多选最多选择5个

方法一：思路-当选择完五个，选择第6个时，不再选中，并且提示用户最多选择5个；
利用select或者change方法，判断绑定数据长度，若大于等于5，message提示，并且绑定数据中不再push数值，直接通过slice截取前面5个
代码示例
效果图：
在这里插入图片描述

方法二：思路-当选择完五个，将其他选项置灰，除非用户取消选中任意，并小于5个时，才放开所有选中项，利用option props的disabled属性判断数组长度以及选中项是否包含在内
在这里插入图片描述
效果图：
在这里插入图片描述

sweetyqi
关注
解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效
此人很懒，什么都没有写
09-14 716
实现效果：正常a-select会根据分辨率、缩放比例动态计算位置等，现在web端已经实现自适应分辨率，需要给下拉菜单设置固定的定位和宽度等样式，不让组件自动瞎设置定位、大小。
vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数
XSL_HR的博客
03-27 6148
往期知识调用（步骤不懂就看这儿）
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这个效果。 1.利用浮动原理 设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。 2.flex布局
ant desigin vue 中 a-select实现可输入可选择
qq_53608274的博客
05-15 1316
项目需求，要实现在select选择实现可输入可选择操作，由于ant desigin vue官网文档未包含此功能，需要自己后续添加逻辑。
ant-design-vue@1.7.8版本下拉多选级联
肖晗的博客
08-30 2227
，需要使用下拉级联多选，时间又比较紧急，因为使用的是 ant-design-vue 的 v1 版本，看到新的版本就有下拉多选级联，在网上也搜索了下，发现了两个，一个是 doit-ui-web ，一个是 design-vue-ui，仔细看了下，后面这个主要是针对 v1 版本进行扩展组件的，也是我现在很需要的。
【React】Antd Select选择器多选设置最多只能选3个
qing_小诺的博客
01-13 3134
起初是想在Select的onchange事件中判断values的数量，数量大于三个的时候来重新setFieldsValue。后来发现在Antd3X版本中 setFieldsValue方法不起作用，Select的值还是会一直增加。亲测好用，方法如下：就是在 onChange 事件中判断选中值的数量，如果大于3，则调用。应用场景描述：Antd3X版本，想要实现form中的 Select 多选最多只能选3个。3、方案3：validator（适用Antd3X、4X版本）
antd select多选_关于antd Select 限制选择个数的解决方案
weixin_31437717的博客
01-26 4864
应用场景描述：Select 被form 所包裹，且被getFieldDecorator修饰。所以值的改变应该通过form的setFieldsValue方法。Select模式肯定会是multiple。且以最多三个值举例。解决思路如下：1 起初是想在Select的onchange事件中判断values的数量，数量大于三个的时候来重新setFieldsValue；且把最后的选项值替换成刚刚选择的值。后来...
Antd Select多选时，限制最大选择数
m0_45219210的博客
01-06 2343
Antd Select多选时，限制最大选择数
Ant Design Select 选择器多选数量控制
qq_44766377的博客
10-15 3436
最终效果图 实现逻辑 根据返回的value的长度 来对 数据来源数组的每一项增加一个布尔值来 进行绑定disabled 如果value长度大于指定的长度则将布尔值改为true。 代码 <a-select mode="multiple" :default-value="[]" style="width: 240px" :placeholder="this.$t('m.Ple..
antd select多选_react 使用antd的多选功能做一个单选与全选效果
weixin_39926613的博客
12-19 1590
import React from 'react';import { Table,Form,Input,Button,Popconfirm,Select} from'antd';import LoadingMixin from'../../../libs/loading.common.mixin';import RequestMixin from'../../../libs/request.mix...
antd-virtual-select:长列表优化antd select组件
05-12
npm i antd-virtual-select 功能特性 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分 虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表，支持上万条数据渲染 对自定义列表项绑定原 Select ...
深入理解Antd-Select组件的用法
10-15
本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-Select组件的类型 1. **基础版**: 这是最简单的下拉选择器，只提供基本的下拉功能，用户可以选择预设的选项。 2. **带搜索功能的下拉选择...
react antd 组件select多选 实现模糊搜索
weixin_54076172的博客
01-06 3058
react select 多选实现模糊搜索功能 <Select onSearch={handleSearchFront} showSearch //可输入 // notFoundContent={null} filterOption={false}//过滤变成flase // defaultActiveFirstOption={false} key={'e
antd select 多选限制个数
张木期的博客
11-08 849
select 下拉选择器多选限制个数
antd的Select组件的多选模式限制多选数量
li1522532686的博客
04-14 4213
项目场景：使用的antd的Select组件的多选模式限制多选数量 问题描述 提示：限制多选的数量： 例如：在使用antd的Select组件的时候，官方并没有提供多选的数量限制，而且这种的情况也比较常见，姑且在antd的Select上面进行了二次封装，具体代码如下： import { useState } from 'react'; import { Select as AntdSelect } from 'antd'; export default function Select(props) { c
antd 选择器（select）限制选择个数
wabcainiao的博客
07-05 699
3.change的时候判断，如果长度大于2，直接删除就可以了。）的时候，判断已经选择的数组长度，话不多说上代码。我的需求场景是，护士站护士签名最多选择两个。1.思路，在select 选择用户（2.数据双向绑定 v-model。
AntD选择器Select模糊搜索，限制个数、字符长度、显示个数
莉兹Liz的博客
12-21 7062
需求 AntD选择器Select模糊搜索，最多选5个，最长字符6个，多余省略号显示，选择超过1个第二个+n显示。 代码 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Select } from 'antd'; const { Option } = Select; const children = []; for
关于antd Select 限制选择个数的解决方案
asdfgh0077的博客
08-11 2936
关于antd Select 限制选择个数的解决方案
antd a-select多选加搜索框
u012858643的博客
06-28 2861
filter-option="filterOption" 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。:autoClearSearchValue="false" 最重要！option-filter-prop="children" 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。
antd select组件多选 mode="tags"禁止输入空格
最新发布
09-07
antd的Select组件是一个下拉选择器，用于从一组数据中选择一个或多个选项。当mode属性设置为"tags"时，Select组件表现得像标签选择器，允许用户添加自定义的标签。如果你需要禁止在多选模式下输入空格来分割选项，可以通过添加事件监听器来控制输入行为。 具体来说，你可以监听Select组件的onInput事件，并在其中过滤掉输入的空格。这可以通过使用JavaScript的String对象的replace方法实现，该方法可以将空格字符替换为空字符串。以下是一个简单的示例代码： ```javascript import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; function handleInput(input) { return input.replace(/\s/g, ''); // 使用正则表达式匹配空格并将其替换为空字符串 } function MultiSelectComponent() { const [value, setValue] = useState([]); const handleChange = (newValue) => { setValue(newValue); }; return ( <Select mode="tags" value={value} onChange={handleChange} onInput={(e) => handleInput(e.target.value)} // 添加onInput事件处理函数 > {/* 这里添加Option子组件 */} </Select> ); } export default MultiSelectComponent; ``` 在这个代码示例中，`handleInput`函数会处理输入事件，移除任何空格，然后Select组件就会使用处理后的输入值。这样，用户在输入时无法通过空格来创建新的选项标签。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值