做项目遇到的问题四：ElementUI DatePicker日期选择器清除后报错！

2021-12-15 3,517 阅读1分钟

问题描述

使用el-date-picker组件，默认带了clearable这个属性，这个属性是用于显示清除按钮，我们点击这个按钮，控制台会报如下错误：

我们的代码如下:

<el-form-item label="统计周期" class="filter-item selectDate">
    <el-date-picker
        v-model="cycleTime"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="handleCycleTime">
   </el-date-picker>
</el-form-item>

<script>
export default() {
    data() {
        return {
            cycleTime: []
        }
    },
    methods: {
        handleCycleTime(date) {
            this.queryForm.beginDate = date[0];
            this.queryForm.endDate = date[1];
        }
    }
}

</script>

问题产生的原因

在我们选择日期范围之前，我们定义的cycleTime是一个空的数组；在我们选择日期范围之后，我们通过watch监听一下cycleTime输出的值：null，这是因为DatePicker组件中没有清除按钮内置的回调函数。

watch: {
    cycleTime(val) {
      console.log('cycleTime的值为：', val) // 控制台打印出来的内容：cycleTime的值为： null
    }
}

解决方法

可以在DatePicker组件的change事件改变时，先判断cycleTime有没有值。

// 统计周期
handleCycleTime(date) {
    if(!date) {
        this.cycleTime = [];
        this.queryForm.beginDate = undefined;
        this.queryForm.endDate = undefined;
    }
}

或者直接这样写：
// 统计周期
handleCycleTime(date) {
    this.queryForm.beginDate = date ? date[0] : undefined;
    this.queryForm.endDate = date ? date[1] : undefined;
}

此时控制台就不会报错了！！！