如何使日期完全出现在 vuejs-datepicker (z-index)答案

【问题标题】：how to make the date appear completely in vuejs-datepicker (z-index)如何使日期完全出现在 vuejs-datepicker (z-index)
【发布时间】：2020-01-06 10:14:38
【问题描述】：

我在 collapse element 中的 v-server-table 组件中有一个 vuejs-datepicke 组件

div.collapse > v-server-table.test-table > span > div.form-group > datepicker

<div :class="{ 'show' : (wheel.id == defaultOpenedWheel || searchKey !== null)}" class="collapse"
   data-parent="#accordion"
   role="tabpanel"
   v-bind:aria-labelledby="'heading-'+index" v-bind:id="'collapse-'+index">
<v-server-table :columns="columnCompetences"
   class="test-table"
   :options="options"
   :show-pagination="false"
   @loaded="onLoaded"
   v-bind:ref="'wheel_'+wheel.id"
   v-bind:url="'/api/competences?wheelId='+wheel.id+'&querySearch='+searchKey+'&memberId='+memberId">
<span slot="target_date" slot-scope="{row}">
   <span v-if="rowToShow !== 'row'+row.id">{{formDate(row.target_date)}}</span>
   <div class="form-group" v-if="rowToShow === 'row'+row.id">
      <datepicker :format="customDateFormat" :input-class="'form-control'"
         v-model="updateRow.target_date"></datepicker>
      <small class="form-text  text-danger"
         v-if="formErrors !== null && formErrors.target_date!==undefined"> {{formErrors.target_date[0]}} </small>
   </div>
</span>

问题：日期选择器未完全显示（我认为是 z-index 问题），我必须向下滚动！

【问题讨论】：

由于您的代码的工作示例，我不确定这是否有效，但您可以尝试设置.vdp-datepicker__calendar { position: fixed; top: auto;} 尝试设置fixed 位置而不是absolute 和top:auto
我将其发布为帮助他人的答案，请接受干杯！

标签： html css vue.js datepicker vuejs-datepicker

【解决方案1】：

尝试将此添加到您的作用域样式中：

<style scoped >
>>> .vdp-datepicker__calendar {
  position: fixed;
}
// Your other styles..
 </style>

或者如果您使用的是 SCSS：

<style scoped lang="scss">
::v-deep .vdp-datepicker__calendar {
  position: fixed;
}
// Your other styles..
</style>

【讨论】：