前言
都是坑,防不胜防,使用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了,如果有更好得方式,请留言!