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


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

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

     <a-select
         v-model="modelId"
         style=" 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"
             />
  • 相关阅读:
    十五、docker的隔离namespace和资源限制cgroup
    十四、docker-compose
    十三、搭建SSL的私有harbor仓库
    帆软常用JS
    oracle_ cursor.executemany
    sql常用语句
    考勤清洗
    JAVA基础教程day03--运算符
    B站视频爬虫
    ES6
  • 原文地址:https://www.cnblogs.com/huxiuxiu/p/13188342.html
Copyright © 2020-2023  润新知