Ant Design 弹出层使用TreeSelect进行下拉选择时下拉列表出现显示不全问题(部分遮挡)


问题截图如下

可以看到下拉框的数据明显要高于页面的高度,下拉框的部分数据被遮挡
首先想到的是设置select的下拉框的高度
1.设置select弹出下拉框的高端,然后添加自动滚动
dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
效果如下图

这样虽然看起来是成立,但是限制了大小,显示在不同大小的屏幕上会显得很难看。而且这个方法并没有彻底解决问题,当你的弹出层拉到页面最顶部距离小于设置的maxHeight高度还是会出现部分被遮挡。
2.然后看了一下官网发现了

自己尝试了一下在组件里面设置了下面的属性
getPopupContainer={triggerNode => triggerNode.parentNode}
发现是可以的,效果如下

基本解决问题


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM