当使用antdesign vue中的select出现下拉框位置偏移的时候,解决方案如下:
1、解决单个或少量下拉框偏移的问题
可以使用该组件的“getPopupContainer”属性,它的作用是相对于菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位,如果遇到下拉框过多的情况下
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@focus="focus"
@change="handleChange"
:getPopupContainer="
triggerNode => {
return triggerNode.parentNode || document.body;
}
"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled>Disabled</a-select-option>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>
2、解决过多下拉框问题偏移的情况
也是使用该属性,不过是将该属性配置到全局化配置中
<template>
<a-config-provider :getPopupContainer="getPopupContainer">
<app />
</a-config-provider>
</template>
<script>
export default {
methods: {
getPopupContainer(el, dialogContext) {
if (dialogContext) {
return dialogContext.getDialogWrap();
} else {
return document.body;
}
},
},
};
</script>