使用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"
         />

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM