When using Alibaba’s Ant Design Vue, when using components such as drop-down menu a-select, you will find that the style cannot be changed.
Analyze the reasons
By carefully looking at the Dom element, we can find that the official Select selector drop-down box is directly inserted into the body tag and is at the same level as the div with the outermost ID of app. Therefore, no matter how you write css in Vue, you cannot overwrite the drop-down box style.
- a-select code needs to be written like this
<a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ></a-select>- The a-date-picker code needs to be written like this. I won’t give examples one by one here. Just take a look at the documentation.
<a-date-picker :getCalendarContainer="(triggerNode) => triggerNode.parentNode" />- Or you can manually specify it to the corresponding node, for example, the others are the same.
<a-select :getPopupContainer="() => document.getElementById('xxx')" ></a-select>Through the above official (triggerNode) => triggerNode.parentNode settings, it is ensured that the current floating frame is inside the component and will not be placed elsewhere.
Official documentation:
