element ui datepicker 时间控件中切换时间问题。

Question

因切换过快导致属性没来得及更新就点开了时间框，导致页面出现格式错误。

 <template>
  <el-date-picker
    v-model="date"
    :type="dateType"
    align="center"
    unlink-panels
    range-separator="~"
    start-placeholder="Start date"
    end-placeholder="End date"
    size="small"
    :picker-options="pickerOptionsType"
    class="date-class"
    value-format="yyyy-MM-dd"
    :format="format"
    prefix-icon="calendar-icon"
  >
  </el-date-picker>
</template>

其中日动态切换成月时

  computed: {     
    dateType: {
        get() {
          let timeType = this.$store.state.time;
          if ('day' == timeType || 'week' == timeType) {
            return 'daterange';
          } else if ('month' == timeType) {
            return 'monthrange';
          }
        }
      }
            }

本来的样式：

如果切换过快，就点开了时间框，如果切换完过两秒就不回出现：

怎么才能解决这个问题，只是格式出现问题，其他的数据都合适，timeType是全局变量，一直都有值的。

Answer 1

参考这个官方的回复https://github.com/ElemeFE/element/issues/4905
两个datepicker 使用v-show判断 https://jsfiddle.net/hgxt68te/1