Ant Design vue中select下拉框组件偏移问题

最新推荐文章于 2025-03-15 15:06:25 发布

TortyE

最新推荐文章于 2025-03-15 15:06:25 发布

阅读量1.4k

点赞数 5

分类专栏： antdv 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/TortyE/article/details/138244703

版权

antdv 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在AntDesignVue中使用select组件时，如何通过`getPopupContainer`属性解决单个或大量下拉框位置偏移问题，包括单次设置和全局配置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当使用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>