使用antd的Select元件,Cascader元件,DatePicker等下拉選項必須要新增的getPopupContainer
阿新 • • 發佈:2018-12-18
getPopupContainer 選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位。
這個屬性,看似不重要的屬性,卻起著重大的作用。
效果圖:
當資料比較多的,可以滾動的時候。點選選擇框,滑動滾輪
沒有新增這個屬性的時候:
當沒有這個屬性的時候 隨著滾動 選項會和選擇框分離。
當新增這個屬性後:
點選後滾動就不會分離
如何新增:
<span className={styles.SeachMargin} id='Select'>
<Select style={{ width: 120 }} onChange={handleSelect} allowClear defaultValue="請選擇狀態"
getPopupContainer={()=>document.getElementById('Select')}
>
在下拉框的父節點設定一個id,在下 拉框中getPopupContainer={()=>document.getElementById(父節點設定的id)
使用getPopupContainer屬性: select元件,Cascader元件
使用getCalendarContainer屬性: DatePicker元件
在antd的每個元件api中都有說明是使用getPopupContainer還是getCalendarContainer