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

解决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>

总结

通过简化handleDateChange方法，直接更新form.arrivalTime，我们解决了日期选择器选择后不回显的问题。这个案例展示了在使用Vue和Element UI时，理解双向数据绑定的重要性以及避免不必要的复杂操作以保持应用的稳定性和性能。

希望这篇文章能帮助你在开发过程中避免类似的问题，并提升你的前端开发技能。如果你有任何疑问或建议，请在评论区留言交流！