如何将datepicker的下拉面板置于Vue.js的顶部？

Question

我正在使用Vue.js的IView组件编写一个网页。但是，当我在卡片组件中嵌入一个datepicker组件时，datepicker的下拉菜单在这里不起作用。似乎下拉面板已隐藏在卡片下方。我怎样才能把它带回到顶端？谢谢。 这是我的代码的一部分：

    <card class="card">
  <p slot="title">线下订单统计</p>
  <Col>
    <Col span="3" class="offlineOrderSplitter">
      <div class="offlineOrderSplitterDiv">
        <p>本月订单总数</p>
      </div>
      <div class="offlineOrderSplitterDiv">
        <p>本周订单总数</p>
      </div>
    </Col>
    <Col span="20">
      <div>
        <span style="padding-left:10px">近一周订单统计</span>
        <div style="float:right">
          <span>今日</span>
          <span>本周</span>
          <span>本月</span>
          <span>
            <DatePicker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
          </span>
        </div>
      </div>
    </Col>
  </Col>
</card>

这是我的截图。当datepicker的下拉面板显示在底部时，它可以工作，因为它不会到达卡外部。但是当弹出式面板位于顶部时，就会出现问题。

我还要指出，我已经尝试过具有最高价值的z-index，但它根本不起作用。

Answer 1

我已通过将数据选择器的属性transfer设置为true来解决了这个问题。