【Exception】Modal中Select组件的下拉选项随页面滚动与Select框分离异常

案发现场

使用Ant Design Vue,在Modal组件中使用Select组件,

当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离的异常。
在这里插入图片描述
异常代码
在这里插入图片描述

原因分析

Select组件有个API getPopupContainer

官方文档给出的用途解释为:“菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位”。

同时官网也强调一个特殊情况需要注意:“如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 :getPopupContainer="triggerNode => triggerNode.parentNode" 将下拉弹层渲染节点固定在触发器的父元素中”。

官方文档
在这里插入图片描述

解决方案

Select组件中添加:getPopupContainer="triggerNode => triggerNode.parentNode"即可。

在这里插入图片描述

发布了105 篇原创文章 · 获赞 46 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/AV_woaijava/article/details/102969334