如何修复元素中的日期选择器日历位置-ui

Question

我的代码中有两个日期选择器，我通过另一个参数（持续时间可以是单天或多天）在彼此之间进行更改。默认设置为单日。第一个日历有正确的位置，但是当我从单日更改为多日并打开范围日期选择器时，在页面左上角设置绝对位置的日历（使用 top:0;left:0 参数）。

我尝试在下面的代码中将指令 v-if 更改为 v-show，它有所帮助，但还有另一个问题。出于某种原因 element-ui 认为选择的值不在范围内并抛出解析错误。所以我需要另一个解决方案。

这是带有日期选择器的一段代码：

<el-date-picker
    v-if="duration === durations.SingleDay"
    placeholder="Enter date"
    value-format="yyyy-MM-dd"
    @input="updateTime($event, 'dateValue')"
    :value="value.dateValue"
></el-date-picker>
<el-date-picker
    v-else-if="duration !== durations.SingleDay"
    placeholder="Enter date"
    type="daterange"
    value-format="yyyy-MM-dd"
    :value="value.dateValue"
    @input="updateTime($event, 'dateValue')"
></el-date-picker>

我想像往常一样定位范围日期选择器，就像在单日参数中的日期选择器中一样。

FIDDLE fiddle 上的演示，首先打开日历并更改类型并重新打开它，您可以看到此错误

Answer 1

在这种情况下，有两种方法可以解决：

将v-if更改为v-show
给Datepicker组件添加不同的key属性（Vue会知道这是两个不同的组件）

其实这不是bug。您在 v-if 和 v-else 中使用相同的组件。两个组件的属性基本一致，所以 Vue 会复用之前的组件，但是应该避免在 Vue 中复用复杂的组件。很容易出错，这就是为什么在vue中必须在v-for中添加一个key。

您复用组件时没有修改内部引用this.$refs.reference，导致popover的位置无法正确计算

如何修复元素中的日期选择器日历位置-ui

How fix datepicker calendar position in element-ui

vue.js

datepicker

element-ui