解决antd中,select和DatePicker组件不跟随页面滚动的问题

在开发过程中,经常会使用到Select、DatePicker等组件,当这些组件在可滚动的区域内滚动时,你会发现该组件的选项框也会跟着滚动,产生分离

解决方法
antd的官方API给我们提供了getPopupContainer属性,该属性是菜单渲染的父节点,默认是body。只要添加该属性,设置好父节点,就可以解决这种分离。

// triggerNode:当前元素的节点
// triggerNode.parentNode:最近的父级元素节点
// 1.select组件
<a-select :getPopupContainer="triggerNode => triggerNode.parentNode"></a-select>
// 2.日期组件
<a-range-picker :getPopupContainer="triggerNode => triggerNode.parentNode"  value-format="YYYY-MM-DD HH:mm:ss" />

设置完之后在select是正常的,但是DatePicker和Cascader可能还是会分离。
我们可以先打印一下这三个组件的triggerNode以及triggerNode.parentNode进行对比观察。这时就能发现这三个组件的triggerNode.parentNode存在差异,DatePicker和Cascader直接找到了最外层的div,他的节点还是在最外层,导致分离。
解决方法
我们可以直接把定位定到本身节点上,就可以解决该问题

<a-range-picker :getPopupContainer="triggerNode => triggerNode"  value-format="YYYY-MM-DD HH:mm:ss" />

* 注:日期选择器 :getPopupContainer="triggerNode => triggerNode" 设置之后,可能选择完时间点击日期组件的确定按钮不好用,可以给父元素加css样式:position:relative;

原文链接:https://blog.csdn.net/qq_43064422/article/details/126597426

posted @ 2023-03-24 17:21  糖糖Y  阅读(509)  评论(0编辑  收藏  举报