解决element日期组件清空后的报错，让你的页面不再崩溃

前言

日期组件在网页开发中是一个非常常用的功能，但是在使用过程中可能会遇到一些问题。其中一个比较常见的问题就是在清空日期组件后会出现报错的情况。这个问题不仅会影响网页的正常运行，还会给开发者带来不必要的麻烦。那么，如何解决这个问题呢？本文将为大家介绍几种解决方案，让你的日期组件更加稳定可靠，让用户的使用体验更加完美！

---

错误截图

---

原因分析

经过排查，我发现出现这种问题是因为当我们清空日期时，v-model 绑定的 value 值会从有值变成一个 null 值，因此控制台才会报错。

---

解决方案

经过上面的分析，现在我们已经知道为什么会报这个错，剩下我们要做到的就是解决这个问题，下面教大家几个简单的方法解决此问题，具体实现代码如下：

---

html 页面

<template>
  <div>
    <el-date-picker :default-time="['00:00:00', '23:59:59']" v-model="timeDate" type="datetimerange" range-separator="至"
      start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <el-button type="primary" @click="saarchOn">查询</el-button>
  </div>
</template>

---

data 数据

data() {
  return {
    timeDate: [],//绑定model
    data: {
      kssj: "",//开始时间
      jssj: "",//结束时间
    },
  };
},

---

1. 三目运算符

methods 方法代码

saarchOn() {
  this.data.kssj = this.timeDate && this.timeDate.length >= 2 ? this.timeDate[0] : null;
  this.data.jssj = this.timeDate && this.timeDate.length >= 2 ? this.timeDate[1] : null;
  console.log(this.data);
},

---

2. Array.isArray

methods 方法代码

//查询点击事件
saarchOn() {
  //通过判断v-model绑定的值，必须是一个Array值且必须有两条值
  //Array.isArray用于检测一个对象是否为数组
  if (this.timeDate && Array.isArray(this.timeDate) && this.timeDate.length == 2) {
    this.data.kssj = this.timeDate[0];
    this.data.jssj = this.timeDate[1];
  } else {
    this.data.kssj = ""
    this.data.jssj = ""
  }
  console.log(this.data);
},

---

3. 组件绑定 change 事件

<el-date-picker></el-date-picker> 绑定 change 事件

<el-date-picker :default-time="['00:00:00', '23:59:59']" v-model="timeDate" type="datetimerange" range-separator="至"
  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeValue">
</el-date-picker>

methods 方法代码

//组件的 chang 事件
changeValue(val) {
  if (val) {
    this.data.kssj = val[0];
    this.data.jssj = val[1];
  } else {
    this.data.kssj = "";
    this.data.jssj = "";
  }
},
// 查询点击事件
saarchOn() {
  console.log(this.data);
},

---

4. 调用之前将绑定的 model 重新赋值

methods 方法代码

//查询点击事件
saarchOn() {
  if (!this.timeDate) {
    this.timeDate = [];
    this.data.kssj = "";
    this.data.jssj = "";
  } else {
    this.data.kssj = this.timeDate[0];
    this.data.jssj = this.timeDate[1];
  }
  console.log(this.data);
},

---

实现效果

至此，问题也就解决啦。