如何在 element-ui 中修复 datepicker 日历位置答案

【问题标题】：How fix datepicker calendar position in element-ui如何在 element-ui 中修复 datepicker 日历位置
【发布时间】：2019-11-12 11:46:17
【问题描述】：

我的代码中有两个日期选择器，我通过另一个参数（持续时间可以是单天或多天）在彼此之间更改它们。默认情况下，它设置为单日。第一个日历的位置正确，但是当我从单日更改为多日并打开范围日期选择器时，在页面左上角设置绝对位置的日历（使用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上的demo，先打开日历改类型再重新打开，就可以看到这个bug了

【问题讨论】：

你能不能做一个小提琴，这样可以帮助我们解决问题？
添加小提琴，可以帮忙吗？

标签： vue.js datepicker element-ui

【解决方案1】：

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

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

事实上，这不是一个错误。您在v-if 和v-else 中使用相同的组件。两个组件属性基本相同，所以 Vue 会复用之前的组件，但要避免在 Vue 中复用复杂的组件。很容易出错，所以必须在vue的v-for中加一个key。

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

【讨论】：