element-ui组件el-date-picker类型date

前言

   都是坑，防不胜防，使用el-date-picker 配置如下

dateRange:[]
...
<el-date-picker ref="dataPicker" 
      v-model="dateRange" 
      :picker-options="pickerOptions" 
      :default-time="defaultTime" 
      @change="dateChange"
      type="datetimerange" 
      size="small" format="yyyy-MM-dd HH:mm" 
      value-format="yyyy-MM-dd HH:mm:ss" 
      range-separator="至"
      start-placeholder="开始时间" 
      end-placeholder="结束时间">
 </el-date-picker>

第一次选择时间啥得都没问题

第一次选择：正常

当第一次选择后外部直接重置daterange ，例如

this.dateRange = this.$options.data.dateRange

在选择el-date-picker， 发现 时间这个弹窗出不来，并且控制台报异常了

第二次异常

看官网API文档并没有类似得方法和处理方案，自己查看了源码，做个特殊处理，先调用datapicker下得unmountPicker() 卸载picker，在调用mountPicker() 挂载Picker。

     // bugfix: When you manually clear the datetimerange type,
      // you cannot trigger the reset of date-range.
      // Here you manually uninstall and then mount the instance under the panel
      this.$refs.dataPicker.unmountPicker()
      this.$nextTick(() => {
        this.$refs.dataPicker.mountPicker()
      })
   
      this.dateRange = this.$options.data.dateRange

ok: 到处报错解决了，再次选择时间也OK了，如果有更好得方式，请留言！

创作、分享不易。收藏和点赞是最大的支持!