antd select下拉选项跟随页面滚动与select框分离

原创于 2020-12-10 17:18:16 发布 · 5.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#antd #select

react 专栏收录该内容

41 篇文章

订阅专栏

本文介绍在使用Ant Design的Select组件时遇到的问题及解决方案。当页面滚动时，Select下拉框可能无法正确显示。通过设置getPopupContainer属性为触发元素的父节点，可以解决此问题。

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

使用antd中的select时,当滚动页面出现以下情况

在这里插入图片描述

<Select
  placeholder="请选择"
   optionFilterProp="children"
   filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
   allowClear
 >
             
</Select>

可以在select 组件中添加
getPopupContainer={triggerNode => triggerNode.parentNode}即可

查看用法select api