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

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

 <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是全局变量,一直都有值的。

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

图片说明

https://blog.csdn.net/niaonao/article/details/88377352

试一下把切换放在this.$store.state.time的watch里呢,还有为什么time要放在store里呢,放data不可以吗

这种情况一般用两个date-pick就行了,一个年一个月。
浏览器不会在乎那点性能损耗的