element-ui时间组件el-date-picker用x清空后报错解决方法

问题描述：今天测试el-date-picker时间组件type="datetimerange"时，发现点击X清空图标，报vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading '0')"，后来发现没对value做判断。

问题分析：在使用DatePicker日期选择器选择日期范围的时候，会用到一个属性clearable。这个属性是Boolean变量，用于决定是否显示清除按钮，默认为true。 当点击清除按钮的时候，value会被设置为null。所以会报错

解决方法：

//引入@change="getMyDateTime()"方法

<el-date-picker
  v-model="searchForm.dateTime"
  type="datetimerange"
  align="right"
  unlink-panels
  range-separator="至"
  :start-placeholder="searchForm.startDate"
  :end-placeholder="searchForm.endDate"
  :picker-options="pickerOptions"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  @change="getMyDateTime()"
></el-date-picker>

getMyDateTime加判断

getMyDateTime() {
  const _this = this.searchForm;
  _this.startDate = _this.dateTime ? _this.dateTime[0] : dataTime.getBeforeDate(30);
  _this.endDate = _this.dateTime ? _this.dateTime[1] : dataTime.getBeforeDate(0);
}

//设置dataTime.getBeforeDate是因为项目的默认时间是30天区间，如果不需要可以用""代替

以上是编程学习网小编为您介绍的“element-ui时间组件el-date-picker用x清空后报错解决方法”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。