【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} />