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

原创 已于 2022-08-02 11:14:23 修改 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#antd #antdesign

于 2022-02-21 17:31:43 首次发布
博客讨论了在使用Ant Design的下拉选择组件时遇到的问题，由于后端返回的数据中ID不唯一，导致下拉菜单显示多个相同的选项。解决方法是确保每个option的ID具有唯一性，以避免重复项的出现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

在这里插入图片描述

antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1549
antd-react 组件库工作以来的总结
React实现滑动选择插件（仿Antd-mobile Picker）
weixin_33924770的博客
05-31 2655
效果图 需求 由于移动端iOS和安卓原生select样式和效果不同，同一个控件在不同系统上效果不同。所以决定制作一个跟iOS风格类似的，可以滚动，选择器插件。之后看到了antd-mobile里面的picker插件符合我们的要求，使用了一段时间感觉其效果不错，隧查看源码，探究其制作过程。但是antd-mobile是Typescript编写...
Ant-design-vue a-select 下拉滚动的时候出现数据重复
执行上下文的博客
06-08 1311
1、问题描述 在滚动下拉列表的时候 数据由正常逐渐变成全部一样的。所以想是不是key值重复了。检查了接口返回的数据后，发现value值有重复的。 2、value值有重复导致。 ...
react AutoComplete options 允许重复下拉数据；解决下拉数据有相同时滚动后数据全部重复问题；
qq_39181017的博客
02-16 1434
问题：1、下拉数据有相同时滚动后数据全部重复； 2、允许下拉框出现相同数据，如下图 解决： 直接在value中加一个id；lable不变； 分析： 由于我这个下拉框本事是通过截取后端传的数据进行拼接的，所以可以直接在value后添加一个id； value不显示，label才是显示项 const lable = `${item.materialCode || ''}，原料名称：${item.materialName || ''}，入库批号：${item.materialBatch ||
Antd Select多选保留一个相同的数据
u014409941的博客
04-24 410
Antd Select多选相同数据保留一个
ant design vue：select多选一行滚动条显示
1111111111
03-11 1889
至此一切都完美，但是随着项目推移，加入了更多组件，发现一个非常奇怪的现象，某个使用了select的自定义组件在其他地方都显示正常，在某个页面显示异常，宽度不够，高度比其他组件高。排查了半天，发现是上面下拉多选样式覆盖导致的，所以需要给组件加id，css里都加上id，就不会再影响其他组件了。下拉多选默认的样式是这样的，会把行高拉大，跟其他组件行高不一致，影响美观。样式问题有时候会很难排查，并且现象很诡异，上次也遇到过。然后下拉多选就变成一行了，带滚动条显示。
antd里面select组件mode为tags时，输入重复按回车键做保留处理
weixin_44205785的博客
08-18 2993
解决用户在重复输入内容时，按下回车删除操作
React antd select多选全选
最新发布
04-23
最后，可能需要考虑性能问题，如果选项很多的话，全选操作是否会导致性能下降，但antd的Select组件已经做了虚拟滚动之类的优化，所以应该没问题。不过用户如果数据量特别大，可能需要进一步的优化，但基础示例应该...
Antd表格数据行选择与批量操作
# 1. 理解Antd表格组件的基础概念 ...- 支持虚拟滚动，能够高效加载大量数据 - 提供丰富的功能，如排序、筛选、分页等 - 支持自定义表头、列配置和数据渲染 ### 1.2 Antd表格组件的基本用法 在使用Antd表
React最佳实践：深入分析antd Select性能优化案例
本文全面介绍了React与antd Select组件的概述、工作原理、性能优化理论基础以及性能优化实践。首先，本文概述了Select组件的内部结构和工作原理，然后探讨了其渲染过程和性能瓶颈。接着，介绍了性能优化的基本理论，...
Ant design Vue menu导航菜单 顶部模式重复显示多个二级菜单
speechless fish 的博客
02-24 1612
是版本的原因，目前我的版本是1.5.2的 更新到1.7.2就没问题了 如果有兼容问题，可以单独更新menu的插件 ant-design-vue，es、lib下面menu和vc-menu
针对ant-design-vue的select组件，实现大量数据时下拉框滚动时动态加载数据
qq_44777765的博客
06-17 2222
antdv的select组件原本是有对大量数据的虚拟滚动的，但是貌似与:dropdownMatchSelectWidth="false"冲突，因此暂且尝试实现了一下动态加载数据。实现的效果不太理想，但也能凑合用，主要问题是无法通过滚动条快速滑动到指定位置，以及无法快速连贯滚动。
element树形控件子节点重复的问题处理
小羊的博客
05-17 2414
记录一次使用element树形控件踩的坑 需求：这次要做的是角色权限配置的需求，需要使用element树形控件来给对应的角色分配对应的导航菜单，像下图这样 问题：写的时候主要问题就是只选择一个子组件不选父组件的时候会打印出两条数据，一条完整的父节点包含子节点的数据，一条单纯只有子节点数据。此时需要把勾选的数据信息传给后台 data是点击的数据，checked是勾选的数据 这样写了以后打印出的数据就会有父组件包含子组件的，也有单个子组件的，总之会很乱 就会出现类似这样的bug效果，，还有其他菜单混乱的效
antd的table会渲染出多的数据的问题
qq_42705372的博客
06-09 2330
antd的table会渲染出多的数据的问题 在模糊查询输入框输入“浙A8888”，发现查询结果有多余的两条数据，并且发现当清空查询条件，每次根据该查询条件查询都会多增加一条“浙A12345”的数据，如图： 后来看控制台，一直在报key值不唯一的问题。发现后台返回两条id相同的数据，即车牌号码为“浙A12345”的数据： 而界面恰好是拿该dispositionId作为key值的： 因此就出现了key值不唯一的问题，也就造成了标题出现的问题，终于破案了~~ 随后我把key设置为唯一值的时候发现该问题也
ant-design Select 选择器 滚动 bug
weixin_46452908的博客
11-21 659
ant-design Select 选择器 滚动 bug
antd select组件下拉菜单渲染错误
weixin_57185351的博客
04-26 761
那么可以推测，在antd Select组件中，当option没有设置key属性时，select组件会自动取value值做为每个option的key。发现报错：’有两个子节点的key是相同的‘，而重复的key值，是sug接口所返回对象的companyName属性值。发现在options对象中，并没有key属性，而且只有value属性是直接使用了companyName。业务反馈了一个线上bug：下拉框的选项与接口实际返回的值不一样。给option对象设置一个唯一key，即可解决渲染错乱的问题。
antd的tree组件：改成单选&同一层级只能展开一个（点击一个节点时另一个展开节点收起）
akira_____的博客
04-28 3220
tree组件有一个很好用的东西是onCheck、onExpend函数传入值里面有节点信息，这个信息很重要。
html中下拉选值重复,【element-ui】两个select下拉框，不能选择相同的值
weixin_42121058的博客
06-03 2202
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...
实现ant design的＜Select＞多选框组件中加上全选功能案例
热门推荐
陈序员的博客
09-17 1万+
本文用了是React+TypeScript+ant design的实例 通过 ant design select 属性Api 提供的 dropdownRender 完成 ant design select 地址 Select props 两个属性都会用到 属性 说明 dropdownRender 自定义下拉框内容 setFieldsValue 设置表单的值 代码： import React, {useState} from 'react' const IndexView = (
antd4的select组件的选项为多个多选框
12-19
在Ant Design (antd v4) 中，`Select` 组件是一个用于选择单个值或多个值的下拉列表，如果需要实现多个选择框的效果，你可以使用 `tags` 属性。当你设置 `tags` 为一个数组时，每个数组元素都会显示为单独的选择项，用户可以选择并取消选择它们，形成一个多选列表。 例如： ```jsx import { Select } from 'antd'; import React from 'react'; const Option = Select.Option; class MultiSelect extends React.Component { state = { selectedTags: ['Option1', 'Option2'], // 初始选择的标签 }; handleSearch = (value) => { console.log('搜索触发', value); }; onChange = (selectedOptions) => { this.setState({ selectedTags: selectedOptions tags }); }; render() { const { selectedTags } = this.state; return ( <Select mode="tags" placeholder="请选择..." onSearch={this.handleSearch} value={selectedTags} onChange={this.onChange} > <Option value="Option1">Option 1</Option> <Option value="Option2">Option 2</Option> {/* 更多选项 */} </Select> ); } } export default MultiSelect; ``` 在这个例子中，`mode="tags"` 指定为多选模式，用户可以在`selectedTags`这一状态变量中获取当前选择的标签。`onChange`事件会在用户改变选择时更新这个状态。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值