bug-ant下拉框解决下拉框跟随表单容器(指定下拉框挂载容器):getPopupContainer=“p=＞p.parentNode“

1.前言

        getPopupContainer是Ant Design Vue（简称Antd）的<a-select>组件的一个属性，用于指定下拉框的挂载容器。默认情况下，下拉框会挂载到body元素上，但有时你可能需要将下拉框挂载到其他元素上，例如一个特定的父元素。

        使用getPopupContainer属性，可以灵活地控制下拉框的挂载容器，从而解决一些常见的布局问题。

2.代码

<template>
  <a-select v-model="selectedValue" :getPopupContainer="getPopupContainer" style="width: 200px;">
    <a-select-option value="option1">Option 1</a-select-option>
    <a-select-option value="option2">Option 2</a-select-option>
    <a-select-option value="option3">Option 3</a-select-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '' // 初始化为空字符串
    };
  },
  methods: {
    getPopupContainer() {
      return document.querySelector('.popup-container');
    }
  }
};
</script>

<a-form-model-item>
   <a-select :getPopupContainer="p=>p.parentNode">
           <a-select-option :key="item.value" v-for="item in marryStatusList">
                  {{ item.name }}
           </a-select-option>
   </a-select>
</a-form-model-item>

注意事项
        确保返回的DOM元素存在：getPopupContainer方法返回的DOM元素必须存在，否则下拉框将无法显示。
        避免返回null或undefined：如果getPopupContainer方法返回null或undefined，下拉框将无法显示。
        避免返回非DOM元素：getPopupContainer方法返回的值必须是一个DOM元素，否则下拉框将无法显示。