当前位置：首页 > article >正文

解决Element UI的el-date-picker组件默认值为当天日期但选择后不回显的问题

article 2025/3/12 7:26:09

解决Element UI的el-date-picker组件默认值为当天日期但选择后不回显的问题

在使用Element UI的el-date-picker组件时，你可能会遇到这样一个问题：虽然设置了默认值为当天日期，但在用户选择了某个日期之后，选择的日期并不会正确地显示在输入框中。这个问题可能让人感到困惑，尤其是在确保代码逻辑看似正确的情况下。本文将详细探讨如何解决这个问题，并提供一个完整的解决方案。

问题描述

我们有一个表单项用于选择到货日期，初始化时设置默认值为当天日期。然而，在用户选择了一个新的日期后，该日期并没有正确地显示在输入框中，而是显示为空或未更新的状态。

代码示例

首先，让我们看看原始代码：

<el-form-item label="到货日期" prop="arrivalTime">
    <el-date-picker
        v-if="editAble"
        style="width: 100%;"
        v-model="form.arrivalTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择到货日期"
        @input="handleDateChange"
        :picker-options="applyOptions">
    </el-date-picker>
    <span v-else>{{form.arrivalTime}}</span>
</el-form-item>

初始化代码：

mounted() {
    this.$set(this.form, "arrivalTime", this.parseTime(new Date(), '{y}-{m}-{d}'));
}

方法定义：

methods: {
    handleDateChange(value) {
        this.$nextTick(() => {
            this.form.arrivalTime = null;
            this.$set(this.form, "arrivalTime", value);
        });
    },
}

分析问题

通过上述代码，我们可以看到几个关键点：

默认值设置：在mounted生命周期钩子中设置了默认值。
事件处理：@input事件触发了handleDateChange方法。
数据绑定：使用了v-model进行双向数据绑定。

问题是出现在handleDateChange方法中，特别是以下两行代码：

this.form.arrivalTime = null;
this.$set(this.form, "arrivalTime", value);

这两行代码实际上会导致arrivalTime被先置为null，然后再赋值为新选择的日期。这种操作可能会导致Vue无法正确追踪到值的变化，从而导致视图没有及时更新。

解决方案

为了修复这个问题，我们需要简化handleDateChange方法，去掉不必要的赋值操作。以下是修改后的完整代码：

修改后的`handleDateChange`方法

methods: {
    handleDateChange(value) {
        // 直接更新form.arrivalTime即可
        this.form.arrivalTime = value;
    },
}

完整代码示例

<template>
  <div>
    <el-form-item label="到货日期" prop="arrivalTime">
      <el-date-picker
          v-if="editAble"
          style="width: 100%;"
          v-model="form.arrivalTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择到货日期"
          @input="handleDateChange"
          :picker-options="applyOptions">
      </el-date-picker>
      <span v-else>{{form.arrivalTime}}</span>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editAble: true,
      form: {
        arrivalTime: ''
      },
      applyOptions: {} // 根据需要配置
    };
  },
  mounted() {
    this.$set(this.form, "arrivalTime", this.parseTime(new Date(), '{y}-{m}-{d}'));
  },
  methods: {
    parseTime(date, format) {
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      return format.replace('{y}', year).replace('{m}', month).replace('{d}', day);
    },
    handleDateChange(value) {
      // 直接更新form.arrivalTime即可
      this.form.arrivalTime = value;
    }
  }
};
</script>