The a-select tag is the selection box in the component. You can check the official website for specific usage. Here are the problems encountered in use.
Recently, when working on a project, there is a need to add a-select tag to a-modal tag. a-modal is a modal dialog box, which means to add a selection box in the modal dialog box. When clicking the selection box, select the item will scroll with the page.
When just opening:
After scrolling the page:
This happens only when the mouse is hovering over the selected item, and it will not appear when hovering in other places.
Then I looked at the structure of the page, and this happens because the selection is rendered on the body by default.
The location of the a-select node:
Location of options menu:
So as long as the option is also placed in the id='app' tag, this problem can be avoided.
The component provides a property:
Add the attribute : getPopupContainer="triggerNode => triggerNode.parentNode" to the tag to change the page structure.
And the date select box also has this problem:
The antdv component used getPopupContainer in the third version, but used getCalendarContainer before the third version.
<a-button style="margin-top: 50vh" type="primary" @click="showModal">Open Modal</a-button>
<a-modal :visible="isShowModal" @cancel="detailsTemplateModelClose" :closable="false" :keyboard="false":maskClosable="false" :confirm-loading="spinning":cancel-button-props="{ props: { disabled: spinning } }" cancelText="关闭" title="Modal" @ok="handleOk">
<a-select placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" :options="selectData"/>
<br>
<a-date-picker :value="value" :getCalendarContainer="triggerNode => triggerNode.parentNode" />
</a-modal>