【Ant Design】下拉列表Select 、日期选择框DatePicker等跟随滚动条上下移动解决方案

ai酸的博文

已于 2022-11-18 09:10:25 修改

阅读量1.5k

点赞数 1

分类专栏：报错记录文章标签：前端 vue.js

于 2022-09-16 16:13:33 首次发布

版权

当使用Ant Design的Select或DatePicker等组件时，由于初始化的位置计算未更新，滚动条滚动会导致组件位置异常。解决方案包括针对单个组件的调整和全局的处理方式，可以参考Ant Design官方的FAQ和相关问题讨论。

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

下拉弹出的列表div是添加到body下的。当滚动条滚动时，初始化计算的top、left属性不会更新，因此组件会随着滚动条上下移动。

单个组件解决方案

<Select getPopupContainer={trigger => trigger.parentElement}>

全局解决方案

<ConfigProvider :getPopupContainer='getPopupContainer'>
  
// function
function getPopupContainer(trigger) {
     <