[【前端】element-ui的时间组件＜el-time-picker＞出现无法选择或无法滚动的解决思路

一个Java菜鸟的前端笔记

• 问题描述：
  时间组件<el-time-picker>无论是新增和编辑均出现无法选择或无法滚动的情况，并且在返回详情时组件是能够成功回显已保存的时间数据的，但就是无法修改
  
  组件

<el-form-item v-if="showMore" label="营业时间" prop="rangeTime">
    <el-time-picker
      is-range
      value-format="HH:mm:ss"
      v-model="listQuery.rangeTime"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围"
      @blur="handleTime"
    >
    </el-time-picker>
  </el-form-item>

设置默认值

  created() {
    if (this.$route.query.enterpriseId) {
      this.addstatus = 1;
      this.localData = {
        enterpriseAddrX: this.$route.query.enterpriseAddrX,
        enterpriseAddrY: this.$route.query.enterpriseAddrY,
      };
      this.latLng =
        this.$route.query.enterpriseAddrX +
        "," +
        this.$route.query.enterpriseAddrY;
      this.getDetail(this.$route.query.enterpriseId);
    } else {
      this.addstatus = 0;
      this.$set(this.listQuery, "rangeTime", [new Date(2018, 12, 1, 9, 0), new Date(2018, 12, 1, 18, 0)]);
    }
  },

解决时间组件无法正常使用的重点就在于$set()


错误示例

总结：请使用$set()赋值，原因有待研究
另外吐槽一下，这个组件貌似必须设置初始值，否则无法选择。。。（至少在我这里是这样）
如有错误，欢迎批评指正！