使用antd中的select选择器、日期选择、Cascader组件等下拉组件下拉框偏移错位(选项和下拉选择框分离)

1.select组件,Cascader组件使用 :

加getPopupContainer属性,直接使用 getPopupContainer={triggerNode => triggerNode.parentNode},像下面这种:

 <a-select
     v-model="modelId"
     style="width: 90%;margin-left:10px;"
     :size="size"
     @change="selectItem"
     placeholder="请选择模型"
     :getPopupContainer="triggerNode=> triggerNode.parentNode">
     <a-select-option
       :value="item.modelId"
        v-for="(item,index) in modelList"
        :key="index">
     {{item.modelName||''}}
   </a-select-option>
</a-select>

2.日期、时间类的组件(DatePicker、TimePicker)

加getCalendarContainer属性,像下面这种

        <a-range-picker
           @change="changeRangeList"
           :value="dateRangeListVal"
           :placeholder="['选择起始日期', '选择截至日期']"
           :getCalendarContainer="triggerNode=> triggerNode.parentNode"
         />

 

posted @ 2020-06-24 16:43  胡柚柚学程序  阅读(3250)  评论(0)    收藏  举报