html - 如何在 Vue.js 中将日期选择器的下拉面板置于顶部？

Question

我正在使用 Vue.js 的 IView 组件编写网页。但是，当我将日期选择器组件嵌套在卡片组件中时，日期选择器的下拉菜单在这里不起作用。似乎下拉面板已隐藏在卡片下方。我怎样才能把它带回顶部？谢谢。 这是我的部分代码:

    <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>

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

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

Answer 1

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