解决element日期组件清空后报错的问题

小半 • 2023年1月18日下午6:36 • 技术随笔 • 阅读 271

前言

最近在使用 element 中的日期选择器时发现一个小 bug，当我清除选中的日期再次点击搜索时控制台就会报错，如下图：

原因分析

经过排查，我发现出现这种问题是因为当我们清空日期时，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 == null ? "" : this.timeDate[0];
  this.data.jssj = this.timeDate == null ? "" : this.timeDate[1];
  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);
},