需求： 在一個table組件中使用DatePicker組件編輯當(dāng)前條信息其中里面包含了時間，在我直接用的時發(fā)現(xiàn)如圖二所示的情況
需求圖
image.png
這個時候只能通過下滑的方式實(shí)現(xiàn)選中你想要的日期，我首先想到的是層級的原因造成的于是我審查元素一級一級的查找之后發(fā)現(xiàn)在table自帶的樣式中有
overflow-x: scroll;這個屬性而且overflow-x和overflow-y不能同時作用，具體原因可查看相關(guān)文檔，在了解到不能改變css樣式實(shí)現(xiàn)之后我決定改變時間彈出框的位置實(shí)現(xiàn)然后在antd文檔中找到getCalendarContainer屬性，其說明是當(dāng)不滿足當(dāng)前位置時可以通過該屬性進(jìn)行更換顯示的位置，getPopupContainer={()=>document.getElementById('Select')}, select是你想要顯示位置的id也可以通過class來定義，當(dāng)然用id最好，這里提議用id,廢話不多說上代碼
<DatePicker
placeholder='請選擇時間'
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
getCalendarContainer={() =>
document.getElementById('test')
}
/>)}
然后在你想要顯示的地方添加id='test'即可最終的效果圖是
完美告終
再見~~~~~~~
