vuejs-datepicker日历无法完整显示的问题求助

核心原因：vuejs-datepicker 默认会把日历弹出层渲染在组件自身的DOM节点内部，当上层父容器设置了 overflow: hidden 或 overflow: auto 时，超出父容器尺寸的弹出层就会被裁剪，导致显示不全。你遇到的问题就来自两个父容器的限制：

• 外层 vx-card 主动设置了 overflow-auto 类
• vs-collapse 组件默认内置了 overflow: hidden 样式

方案1（优先推荐，无副作用） #

直接给datepicker组件添加自带的 append-to-body 属性，让日历弹出层直接渲染到页面body节点下，完全脱离父容器的overflow限制：

<datepicker 
  :append-to-body="true"
  class="vx-col w-1.4 " 
  placeholder="Select Start Date" 
  v-model="query.startDate" 
  format="yyyy-MM-DD"
></datepicker>

两个datepicker组件都加上这个属性即可，不需要修改其他父容器样式，也不会影响vx-card原本的滚动功能。

方案2（如果方案1出现定位异常时使用） #

如果因为页面样式特殊性，append到body后定位偏移，可以修改所有上层限制容器的overflow属性：

1. 给 vs-collapse、vs-collapse-item 添加上overflow可见样式
2. 如果你不需要vx-card的滚动效果，也把vx-card的overflow-auto替换为overflow-visible

可以在当前组件的style标签添加以下样式：

/* 去除collapse的隐藏限制 */
.vs-collapse, .vs-collapse-item {
  overflow: visible !important;
}
/* 如果需要保留vx-card的滚动，就删掉下面这行，只用方案1 */
.vx-card.overflow-auto {
  overflow: visible !important;
}

可选补充 #

如果出现日历被其他页面元素遮挡的情况，可以给日历弹窗加高层级：

.vdp-datepicker__calendar {
  z-index: 9999 !important;
}

内容的提问来源于stack exchange，提问作者OjayChima