ElementUI 日期选择器的坑：DatePicker 的 clearable 属性陷阱

在使用 ElementUI 的 DatePicker 日期选择器时，我踩到了一个坑，而这个坑与 clearable 属性有关。让我们一探究竟。

clearable 属性：清除按钮的显示

clearable 属性是一个 Boolean 变量，用于决定是否显示清除按钮，默认为 true。当此属性为 true 时，会在日期选择器中显示一个 X 图标，单击此图标可清除已选择的日期。

DatePicker 日期范围选择中的问题

问题出现在我们使用 DatePicker 选择日期范围时。假设我们有以下代码：

<el-date-picker
  v-model="value"
  type="daterange"
  clearable
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>

在此代码中，我们指定了 clearable 为 true，表示将显示清除按钮。

陷阱：value 在清除后仍有值

在选择日期范围之前，value 是一个空数组。然而，在选择日期后，当我们单击清除按钮时，value 并没有变为空数组，而是变成了一组包含 null 值的数组：

value: [null, null]

这会带来一些问题，例如在提交表单时，服务器可能无法正确解析日期范围。

原因：清空的是内部状态，而不是 v-model

出现这种情况的原因是：当点击清除按钮时，DatePicker 清空的是它的内部状态，而不是 v-model。因此，v-model 仍然包含先前选择的日期范围。

解决方法：手动清除 v-model

要解决这个问题，我们需要手动清除 v-model。一种方法是使用 JavaScript 代码：

<script>
export default {
  methods: {
    clearDates() {
      this.value = [];
    }
  }
};
</script>

然后，将 clearDates 方法绑定到清除按钮的 click 事件：

<el-button @click="clearDates">清除</el-button>

总结

在使用 ElementUI DatePicker 日期选择器的 clearable 属性时，需要小心处理。当在日期范围选择中使用 clearable 属性时，清除按钮只会清空组件的内部状态，而不会清除 v-model。因此，需要手动清除 v-model 以避免出现问题。