ant-design Select 选择器 滚动 bug

最新推荐文章于 2024-07-03 09:33:48 发布
原创 最新推荐文章于 2024-07-03 09:33:48 发布 · 690 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug #css #前端

本文介绍了解决Vue3项目中遇到的下拉框跟随滚动条滚动及层级错乱的问题。通过调整:getPopupContainer属性和z-index值，确保了下拉框正确显示并解决了层级冲突。

开发过程中发现一个问题，原代码如下

页面呈现效果如下：

乍一看是没有什么问题的，但是当滚动条开始滚动的时候，问题就出现了

跟着我的滚动条一起滚动了

解决方法

其实官网有提到过这个问题

结论就是再其中加入:getPopupContainer="(triggerNode) => triggerNode.parentNode"

下拉框就会随着父元素一起滚动了，解决！

然后又有新问题了

下拉之后发现选项的优先级居然比菜单栏更高！

看了下css 上面菜单栏的z-index为10 ，而选择器选项的z-index高达1050！

看来只能是把选项的z-index降到10以下了

vue3中改ant-design的样式是通过:global(.classname)这种方法来修改的

所以实现方式如下

或者全局修改 :global

然后问题就解决了

Vue - Ant Design Vue 中 ＜a-select＞ 选择器组件，既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
🏆 前端领域优质创作者
12-22 2万+
ant组件库的选择器怎么既能选，又能像文本框一样输入。antd-vue的select组件实现既可以输入添加,又可以下拉选择。antdesignselect可输入可选择，既可以输入又可以选择得框，如何实现ant选择器能选择项目还能直接输入文本内容，ant-design-vue中的select选择器,对输入值的进行筛选操作，vue，antdesignvue，select选择器，a-select，a-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可
Vue3 - Ant Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“，既能下拉框选择又可以像 input 一样输入文字内容，让 Select选择器组件能选也能输入文字
热门推荐
🏆 前端领域优质创作者
07-03 1万+
vue3，ant-design-vue，select选择器，a-select，实现可下拉选择和手动输入，antd组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，可选择可以手动输入，Vue3使用a-select下拉框实现可输入可选择，可新增输入可选择，vue3使用Antdesignvue4.x选择器Select既可以下拉选择也可以手动输入，可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入框功能，最新教程，vue3中Antd如何做到下拉框既有select功能也有inpu
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移
孜然卷的博客
02-01 1257
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用。将下拉弹层渲染节点固定在触发器的父元素中。
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1602
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
ant design select组件 解决选项框随页面滚动分离问题
weixin_46449470的博客
07-01 2662
在ant design 使用过程中，发现页面内容超过一屏会出现选项框跟随滚动而滚动 其实这是官方组件存在的问题， getPopupContainer 菜单渲染父节点，默认渲染到 body 上。 使用getPopupContainer属性： select组件，Cascader组件 使用getCalendarContainer属性： DatePicker****组件 在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer 1，getPopupCo
ant design 中 select的option 随页面滚动条滚动的bug问题
hzxOnlineOk的博客
09-14 690
原代码(有bug代码)： <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}> <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="disabled" disabled>Disabled</Opt...
解决react antd Select下拉框滚动条只能滚轮滚动，不能拖动bug
Peter_Anna的博客
01-17 1104
解决react antd Select下拉框滚动条只能滚轮滚动，不能拖动bug
ant-design-vue select组件的placeholeder样式怎么修改
最新发布
08-08
- 使用深度选择器覆盖`ant-select-selection__placeholder`的样式 注意：在Vue3和某些环境中，深度选择器的写法可能不同，请根据实际情况调整。 如果上述方法不生效，我们还可以尝试通过全局样式来修改，但要...
ant-design-vue的组件选择器选不中
01-21
当遇到 ant-design-vue 中的选择器组件（如 Select 或其他类似的输入型组件）无法正常工作的情况时，通常可以从以下几个方面排查并解决问题： #### 1. 检查依赖版本兼容性 确保所使用的 ant-design-vue 版本与其他...
Vue3 - Arco Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“，既能下拉框选择又可以像 input 一样输入文字内容，让Select选择器组件能选也能输入文字
🏆 前端领域优质创作者
07-03 2863
vue3，arco-design-vue，select选择器，a-select，实现可下拉选择和手动输入，arco组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，可选择可以手动输入，Vue3使用a-select下拉框实现可输入可选择，可新增输入可选择，vue3使用arcodesignvue选择器Select既可以下拉选择也可以手动输入，可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入框功能，最新教程，vue3中arco.design如何做到下拉框既有select功能
antd-Select组件遇到的小坑
qq_42547120的博客
03-04 721
// 接口来源数据 const treeDataSource = [ { title: '文件导入', value: '0-0', key: '0-0' }, { title: '平台导入', value: '0-1', key: '0-1' }, ] <Form.Item ...
针对ant-design-vue的select组件，实现大量数据时下拉框滚动时动态加载数据
qq_44777765的博客
06-17 2285
antdv的select组件原本是有对大量数据的虚拟滚动的，但是貌似与:dropdownMatchSelectWidth="false"冲突，因此暂且尝试实现了一下动态加载数据。实现的效果不太理想，但也能凑合用，主要问题是无法通过滚动条快速滑动到指定位置，以及无法快速连贯滚动。
element select嵌套tree，focus后下拉框默认滑动到底部原因
lbb_mh的博客
03-15 805
element select+tree嵌套，下拉数据展示有问题
Ant design vue a-select的坑
weixin_42385866的博客
10-24 544
ant design vue的a-select的坑
antd select选择器下拉框跟随滚动条滚动
qq_41536505的博客
06-24 491
antd select选择器下拉框、AutoComplete 下拉框跟随滚动条滚动怎么解决？
解决antd下拉框，日历等组件跟随滚动条滚动bug
张鹏~IT~少年人的博客
10-27 3393
Select组件有个API getPopupContainer，Ant Design官方文档给出的用途解释为：“菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位”。同时官网也强调一个特殊情况需要注意：“如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中”。 .
antd selected标签滚动，突然变成多个一样的的选项
qq_37233023的博客
02-21 2005
antd selected标签滚动，突然变成多个一样的的选项。查看了一下option的id不唯一，导致下拉项重复。后端返回数据id不唯一，重复。
解决react + ant-design中Select下拉框分离随页面滚动问题
go
07-12 1722
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。 很多方法试了并没有成功，最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性： 2、在的上一层用包裹
vue3+ant-design的select实现下拉框滚动分页加载
qq_41673169的博客
03-19 1108
【代码】vue3+ant-design的select实现下拉框滚动分页加载。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值