Ant Design Modal 中Select组件下拉选项随页面滚动与Select框分离

其实这是官方组件存在的问题，

getPopupContainer 菜单渲染父节点，默认渲染到 body 上。

使用getPopupContainer属性： select组件，Cascader组件

使用getCalendarContainer属性： DatePicker****组件

在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer

1，getPopupContainer属性的，可以直接使用 getPopupContainer={triggerNode => triggerNode.parentNode}

2，**getCalendarContainer属性的，**默认为 body 上新建 div，可能不需要设置这个属性。如果需要设置可以按照上文中那样设置

使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。

举例:
Select

 <a-form-item label="承运商：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
   <a-select  class="W300" 
      :filterOption="filterOption" 
      allowClear 
      showSearch
      @change="handleChange"
      placeholder="请选择"
      :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}"//新增加定位
      v-decorator="['carrierId',{rules: [{ required: true, message: '承运商' }]}]"
    >
     <a-select-option 
        v-for="(item,index) in carrierList" 
        :value="item.companyId"
        :key="index"
     >
        {{item.companyName}}
     </a-select-option>
  </a-select>
 </a-form-item>

auto-complete

<a-auto-complete
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode;
                    }
                  "
                  :defaultOpen="false"
                  dropdown-class-name="certain-category-search-dropdown"
                  :dropdown-match-select-width="false"
                  :options="searchData"
                  :loading="searching"
                  @focus="costNameFocus(itemInput[item.dataIndex].value)"
                  v-model:value="itemInput[item.dataIndex].value"
                  @select="selectChange(itemInput[item.dataIndex], itemInput['cost_name_standard'])"
                  @search="searchChange"
                ></a-auto-complete>