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