qq_39019765
打杂的程序员
采纳率60%
2019-07-25 09:58 浏览 1.2k

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

10

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答 默认 最新

  • 已采纳
    ft_christ ft_christ 2019-08-12 17:07

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

    图片说明

    点赞 1 评论 复制链接分享
  • KaSuo_ KaSuo_ 2019-07-25 13:30

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

    点赞 1 评论 复制链接分享
  • u011166225 狗蛋丶 2019-08-02 13:35

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

    点赞 1 评论 复制链接分享
  • dabocaiqq dabocaiqq 2019-07-25 10:00

相关推荐