<Select style={{width: 200}} getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
</Select>
根据官方Api,若位置发生偏移,添加getPopupContainer属性,使其依附于其父节点,默认是body
但是在后续的开发中,碰到了一种情况:
<div>
<span>
<Select getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
...
</Select>
</span>
</div>
这样还是会发生下了拉框偏移,怀疑Select组件没有找到正确的父元素,所以默认为了body,于是我尝试换了一种写法
<Row>
<span>
<Select getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
...
</Select>
</span>
</Row>
我将最外层的div换成了antd特有的Row组件,结果成功了,所以总结如下:
若要解决Select下拉框位置偏移问题,有两要素:
①添加getPopupContainer属性
②最外层元素要是antd组件,不能是平常的div,span等元素