element 日期选择器 踩坑记录

 <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

问题一 点击清空按钮报错

问题二 修改无效 视图不更新

问题一 点击清空按钮报错

点击清空按钮之后 会显示 TypeError: Cannot read property ‘0’ of null

原因是因为原本value1的值是数组 清空按钮之后就变null 所以就报错了

方法一

可以使用事件监听 监听value1的值等于null就换成数组 

 watch: {
	value1 (newval) {
		if (newval === null) {
			this.value1 = []
		}
	}
}

方法二

使用清空事件

 <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @clear="handleClearValue1"
      >
    </el-date-picker>


handleClearValue1() {
	this.value1 = []
},

问题二 修改无效 视图不更新

如果有默认时间我点击清空按钮无效 但是事件传参显示时间为空 并且使用nextTick也不生效 应该是视图更新的问题

解决方法

 <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @clear="handleClearValue1"
      @input="changeDate"
      >
    </el-date-picker>


changeDate () {
	this.$forceUpdate()
},

最后附上传参判断

query () {
  this.valueStart = this.value1 && this.value1.length >= 2 ? this.value1[0] : null
  this.value1End = this.value1&& this.value1.length >= 2 ? this.value1[1] : null
}