【Exception】Modal中Select組件的下拉選項隨頁面滾動與Select框分離異常

案發現場

使用Ant Design Vue，在Modal組件中使用Select組件，

當點擊Select組件出現下拉選項後滾動原始頁面，出現下拉選項和Select框分離的異常。

異常代碼

原因分析

Select組件有個API getPopupContainer

官方文檔給出的用途解釋爲：“菜單渲染父節點。默認渲染到 body 上，如果你遇到菜單滾動定位問題，試試修改爲滾動的區域，並相對其定位”。

同時官網也強調一個特殊情況需要注意：“如果發現下拉菜單跟隨頁面滾動，或者需要在其他彈層中觸發 Select，請嘗試使用 :getPopupContainer="triggerNode => triggerNode.parentNode" 將下拉彈層渲染節點固定在觸發器的父元素中”。

官方文檔

解決方案

在Select組件中添加:getPopupContainer="triggerNode => triggerNode.parentNode"即可。