zoukankan      html  css  js  c++  java
  • ant design vue 时间选择器组件(a-date-picker)时间选择面板展示位置问题

    在使用a-date-picker组件时会出现如下的情况,时间选择面板只会展示在上方超出浏览器顶部的部分会被遮盖的问题:

    可以使用getCalendarContainer属性来解决

    <a-date-picker
                          v-model="baseInfo.birthday"
                          type="date"
                          :disabled-date="disabledDate"
                          placeholder="请选择出生日期"
                          style=" 100%;"
                          :getCalendarContainer="getCalendarContainer()"
                          @change="(mom, value) => setTime(value, 'birthday')"
                        />
    
    
    getCalendarContainer() {
        return triggerNode => triggerNode.parentNode;
    }
    

    但是在嵌套在a-form-model-item组件中时结构如下的话设置getCalendarContainer属性不会生效,可以在组件外层添加一个div元素来解决;

    <a-form-model-item label="户籍性质" prop="domiciliaryNature">
        <a-date-picker
                       v-model="baseInfo.birthday"
                       type="date"
                       :disabled-date="disabledDate"
                       placeholder="请选择出生日期"
                       style=" 100%;"
                       :getCalendarContainer="getCalendarContainer()"
                       @change="(mom, value) => setTime(value, 'birthday')"
                       />
    </a-form-model-item>
    

    解决时的代码结构:

    <a-form-model-item class="birthday" label="出生日期" ref="birthday" prop="birthday">
        <div>
            <a-date-picker
                           v-model="baseInfo.birthday"
                           type="date"
                           :disabled-date="disabledDate"
                           placeholder="请选择出生日期"
                           style=" 100%;"
                           :getCalendarContainer="getCalendarContainer()"
                           @change="(mom, value) => setTime(value, 'birthday')"
                           />
        </div>
    </a-form-model-item>
    

    解决后的效果如下:

  • 相关阅读:
    C++类中的封装-9
    递归神经网络
    卷积神经网络
    Tensorflow人工智能神经网络学习
    右键弹出菜单 并动态新增菜单子项
    sql 列转行
    sql 删除表中某字段的重复数据
    疑难问题解决
    jquery ashx交互 返回list 循环json输入信息
    jquery 控件赋值
  • 原文地址:https://www.cnblogs.com/xmbhyw/p/15305685.html
Copyright © 2011-2022 走看看