element-ui 时间控件使用v-if导致控件错位

• 首先看一下错误，如下图，控件错位很严重

引用elfman的回答

• 错误原因

这个并不算Element的bug，你在v-if与v-else中使用了同一种Component，这两个Component属性也基本一致，所以Vue会复用之前的组件时没有把内部引用的this.$refs.reference修改过来，计算popover的位置出错。

• 解决的方法

1，最佳方法是在DatePicker上加上key属性，明确告知Vue这是两个不同的组件，避免组件的复用；
2，也可以使用v-show代替v-if；

<template v-if="isUseTimeDate.includes(formElementModule.type)">
      <el-form-item label="默认值">
          <el-date-picker
                  v-model="formElementModule.defaultValue"
                  :type="createDateType"
                  :key="formElementModule.type"
                  :value-format="formElementModule.pattern"
                  placeholder="选择日期">
          </el-date-picker>
      </el-form-item>
  </template>