-
antd：ConfigProvider+getPopupContainer解决筛选框遮挡问题（及其他浮层问题）
一. 问题场景
当表格高度太低（下图业务场景出现在数据条数太少时），column中有筛选框，可能会出现筛选框被遮挡的问题：
这是因为filter的下拉菜单渲染在table的表头栏，而表头内容只能渲染在table的content高度以内
二. 解决方案
我们可以利用antd官方给出的方法来解决：
- getPopupContainer方法来更改筛选框渲染挂载的元素
举例：
当有弹出框（Select, Tooltip, Menu 等等）渲染父节点时，可以直接在组件上使用该方法
- ConfigProvider全局化配置
ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。
可以直接包在组件外， 内部所有浮层都会生效
三. 代码示例
table的columns中有filters筛选框，原代码：
{ title: '数据库来源', key: '', dataIndex: '', ………………, filters: [ { text: 'zeus', value: 'zeus' }, { text: 'garm', value: 'garm' }, { text: '其他', value: 'direct' }, ], onFilter: (value, record) => {...} }, return ( <Table> dataSource={list} columns={columns} ... /> )- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
此时下拉框是内部封装，所以
getPopupContainer不能直接挂载在下拉框组件上。思路：在table外包一层元素，并将筛选框浮层挂载在该元素上
解决方案一：不使用原有封装，自己实现filterDropdown的render，再挂载getPopupContainer
解决方案二：（推荐）使用ConfigProvider+getPopupContainerconst tableRef = useRef() return( // 使用ConfigProvider全局地将内部浮层元素挂载到div上 <ConfigProvider getPopupContainer={() => tableRef.current}> <div ref={tableRef}> <Table> dataSource={list} columns={columns} ... /> </div> </ConfigProvider> )- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果图：
- getPopupContainer方法来更改筛选框渲染挂载的元素
-
相关阅读:
R语言编写用户自定义函数：R语言编写用户自定义函数计算多个输入参数的最大公约数（两个输入为数值）
《C++ Primer》练习9.43-练习9.46:替换字符串简写和插入前后缀
丙二醇二乙酸酯（Propylene Glycol Diacetate）
JVM工具使用（jstat + jmap）
Leetcode1-两数之和详解
SpringCloud：Feign远程调用
WordPress 安装教程
中远麒麟堡垒机tokensSQL注入漏洞
【MySQL】表的约束（一）
基于JavaGUI的图书管理系统
- 原文地址：https://blog.csdn.net/qq_29493173/article/details/128004086
