在使用antd vue的select、DatePicker、TreeSelect、AutoComplete组件需要注意页面滚动会导致下拉框也随之移动,如下图所示:
DatePicker的getCalendarContainer属性可以解决这个问题, 定义浮层的容器,默认为 body 上新建 div:
<a-range-picker
style="width: 100%;"
:defaultValue="initDateRange()"
:disabled="disabled"
:getCalendarContainer="getCalendarContainer()"
@change="getDateRange"
/>
方法:
getCalendarContainer() {
return triggerNode => triggerNode.parentNode;
}
如果是select、TreeSelect、AutoComplete组件出现这个问题,设置其getPopupContainer属性来解决问题即可;