【Ant Design】Table中的filter下拉选项随页面滚动与table表头分离异常

背景:使用Ant Design,在Table组件中使用filter下拉筛选功能,当点击表头筛选选项时,出现下拉框随页面滚动,与table表头分离异常。

异常图片:

异常代码:

<Table columns={columns} dataSource={data} />

问题点:

Table组件有个API,getPopupContainer,Ant Design官方文档给出的用途解释为:设置表格内各类浮层的渲染节点,如筛选菜单。

解决方案:

在Table组件中添加“getPopupContainer={triggerNode => triggerNode.parentNode}”属性即可。

正确代码:

<Table columns={columns} dataSource={data} getPopupContainer={triggerNode => triggerNode.parentNode} />

修改后效果:

posted @ 2020-12-18 17:36  春燕啄春泥  阅读(1289)  评论(0编辑  收藏  举报