element 日期选择器踩坑记录

最新推荐文章于 2024-08-20 14:14:38 发布

xcy_Celia

最新推荐文章于 2024-08-20 14:14:38 发布

阅读量501

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/xcy_Celia/article/details/134557433

版权

 <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
}