Ant Design vue 解决a-select下拉菜单跟随页面滚动问题

945 阅读1分钟

问题:点击select框,滚动页面,其下拉框也跟随页面滚动

官网解决方案如下:

截屏2022-09-06 下午8.01.24.png

注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。

在vue中,代码如下:

<a-select
    ref="select"
    style="width: 15rem"
    :mode="item.componentProps.mode"
    v-model:value="userInfoValForm[item.field]"
    :options="item.componentProps.options"
    :getPopupContainer="
       (triggerNode) => {
           return triggerNode.parentNode;
       }"
    @change="handleChange">
</a-select>