antd selected标签滚动，突然变成多个一样的的选项

已于 2022-08-02 11:14:23 修改
阅读量1.4k 收藏 1
点赞数 2
分类专栏： react antd js 文章标签： antd antdesign
于 2022-02-21 17:31:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37233023/article/details/123051911
版权
react 同时被 3 个专栏收录
15 篇文章 1 订阅
订阅专栏
antd
5 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

antd selected标签滚动，突然变成多个一样的的选项
查看了一下：option的id不唯一，导致下拉项重复
在这里插入图片描述
后端返回数据id不唯一，重复

在这里插入图片描述

开发小白菜
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 s+: this.getSeconds(), //秒 q+: Math.floor((this.getMonth() + 3
Ant-design-vue a-select 下拉滚动的时候出现数据重复
最新发布
执行上下文的博客
06-08 732
1、问题描述 在滚动下拉列表的时候 数据由正常逐渐变成全部一样的。所以想是不是key值重复了。检查了接口返回的数据后，发现value值有重复的。 2、value值有重复导致。 ...
【React】手写虚拟化无限滚动组件
01-08
前言 react的虚拟化无限滚动有别人写好的，antd的list组件里也有这种虚拟化组件，antd虚拟化列表地址。 由于上次写了一篇浅显的滚动性能优化后发现这种技术可以更大的提升效率，并且上次那篇的蛮力实现的思维走入了死胡同，而这种方案让我立马来了兴趣，想要实现一番。 原理 原理就和我在那篇评论里留言的差不多，就是每次只显示固定的几个div，滚动时把div给换掉。 这东西实现起来难点有下面几个： 一、滚动条的出现 二、可视区域流畅移动 三、闪屏优化 这玩意就不按步骤写了，主要说一下这几个难点是怎么解决的： 滚动条出现 这个难点最简单，但是思路没打开就容易想不到这种虚拟化实现方法。靠空白的div
react+antd多页面框架
01-08
react+antd多页面框架
横向滚动table列表
07-09
简单的分列式table列表组件，通过组合关联table和UICollection实现，给予大家简单的启示。
element树形控件子节点重复的问题处理
小羊的博客
05-17 1981
记录一次使用element树形控件踩的坑 需求：这次要做的是角色权限配置的需求，需要使用element树形控件来给对应的角色分配对应的导航菜单，像下图这样 问题：写的时候主要问题就是只选择一个子组件不选父组件的时候会打印出两条数据，一条完整的父节点包含子节点的数据，一条单纯只有子节点数据。此时需要把勾选的数据信息传给后台 data是点击的数据，checked是勾选的数据 这样写了以后打印出的数据就会有父组件包含子组件的，也有单个子组件的，总之会很乱 就会出现类似这样的bug效果，，还有其他菜单混乱的效
Ant design Vue menu导航菜单 顶部模式重复显示多个二级菜单
speechless fish 的博客
02-24 1439
是版本的原因，目前我的版本是1.5.2的 更新到1.7.2就没问题了 如果有兼容问题，可以单独更新menu的插件 ant-design-vue，es、lib下面menu和vc-menu
html中下拉选值重复,【element-ui】两个select下拉框，不能选择相同的值
weixin_42121058的博客
06-03 2062
element 有两个select下拉框，下拉数据都是一模一样,需求是不能同时选择相同的值，请问如何实现，谢谢各位v-for="item in options":key="item.value":label="item.label":value="item.value">v-for="item in options":key="item.value":label="item.label":v...
antd里面select组件mode为tags时，输入重复按回车键做保留处理
weixin_44205785的博客
08-18 2501
解决用户在重复输入内容时，按下回车删除操作
ant design vue：select多选一行滚动条显示
1111111111
03-11 1445
至此一切都完美，但是随着项目推移，加入了更多组件，发现一个非常奇怪的现象，某个使用了select的自定义组件在其他地方都显示正常，在某个页面显示异常，宽度不够，高度比其他组件高。排查了半天，发现是上面下拉多选样式覆盖导致的，所以需要给组件加id，css里都加上id，就不会再影响其他组件了。下拉多选默认的样式是这样的，会把行高拉大，跟其他组件行高不一致，影响美观。样式问题有时候会很难排查，并且现象很诡异，上次也遇到过。然后下拉多选就变成一行了，带滚动条显示。
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
react-ReactScrollTo一个React组件可以帮助滚动页面至指定位置
08-15
react-ReactScrollTo一个React组件可以帮助滚动页面至指定位置
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
基于 React Native 的多平台支持。使用 TypeScript 开发，提供类型定义文件。演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --saveoryarn add @sishuguojixuefu/antd-mobile-rn...
antd-input-tag.zip
06-25
Antd react 组件，将input输入值转为tags
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
使用antd的Select组件，Cascader组件，DatePicker等下拉选项必须要添加的getPopupContainer（解决选项框随页面滚动分离问题）
热门推荐
Zeng__Yi的博客
10-29 3万+
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 这个属性,看似不重要的属性，却起着重大的作用。 效果图： 当数据比较多的，可以滚动的时候。点击选择框，滑动滚轮 没有添加这个属性的时候： 当没有这个属性的时候 随着滚动 选项会和选择框分离。 当添加这个属性后： 点击后滚动就不会分离 如...
【ant design】解决Select，DatePicker，Cascader等组件选项框随页面滚动分离问题
weixin_55846296的博客
09-16 750
在开发过程中，会使用很多的Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离。如下图所示: <template> <a-config-provider :getPopupContainer="getPopupContainer"> <a-locale-provider :locale="locale" > <div id="app"> <rout
Antd组件中选择框数据量太大处理
qq_51249969的博客
05-09 536
【代码】Antd组件中选择框数据量太大处理。
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1389
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
antd输入框多标签输入
05-31
要实现antd输入框多标签输入的功能，您可以使用antd的`Select`组件和`Tag`组件。`Select`组件提供了下拉列表，而`Tag`组件可以展示多个标签。 以下是一个简单的示例代码，展示如何使用`Select`组件和`Tag`组件实现多标签输入： ```jsx import { Select, Tag } from 'antd'; const { Option } = Select; function MyComponent() { const [tags, setTags] = useState([]); const handleSelect = (value) => { if (!tags.includes(value)) { setTags([...tags, value]); } }; const handleTagClose = (tag) => { const newTags = tags.filter((t) => t !== tag); setTags(newTags); }; return ( <div> <Select mode="tags" style={{ width: '100%' }} onSelect={handleSelect} tokenSeparators={[',']} > <Option value="apple">Apple</Option> <Option value="banana">Banana</Option> <Option value="orange">Orange</Option> </Select> <div style={{ marginTop: 16 }}> {tags.map((tag) => ( <Tag closable onClose={() => handleTagClose(tag)} key={tag}> {tag} </Tag> ))} </div> </div> ); } ``` 在上面的代码中，我们使用了`Select`组件，并将其`mode`属性设置为`tags`，以启用多标签输入。我们还设置了`onSelect`回调函数，以在用户选择新标签时更新标签列表。 我们还使用了`Tag`组件，在一个`div`中展示了所有已选择的标签。当用户关闭标签时，我们使用`onClose`回调函数从标签列表中移除该标签。 注意，我们还设置了`tokenSeparators`属性为`[',']`，以指定用户用逗号分隔每个标签。 除了上面的示例代码，您还可以使用其他antd组件和属性来自定义多标签输入的外观和功能。有关更多信息，请参阅antd文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值