vue el-date-picker change校验

在Vue.js中，`el-date-picker` 是 Element UI 库中的一个日期选择组件。如果你想在用户选择日期后进行校验，通常你会结合使用`v-model`指令和自定义事件或者`watch`属性。`change`事件会在用户更改日期后触发，这时你可以编写校验规则。

以下是一个简单的例子，展示如何在`el-date-picker`组件的日期改变后进行校验：

<template>
  <el-date-picker
    v-model="date"
    type="daterange"
    @change="validateDate"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
    };
  },
  methods: {
    validateDate(newDates) {
      // 假设我们要求日期范围不能超过当前日期
      const today = new Date();
      if (newDates.endOf('day') > today) {
        this.$emit('error', 'Invalid date range, end date must be before today.');
      } else {
        // 如果校验通过，可以清除错误消息或者执行其他操作
        this.$emit('clear-error');
      }
    },
  },
  // 如果你想在日期改变时立即进行校验，也可以用 watch 监听
  // watch: {
  //   date(newVal, oldVal) {
  //     this.validateDate(newVal);
  //   },
  // },
};
</script>

在这个例子中，`validateDate`方法接收用户选择的新日期，然后检查是否符合要求。如果不符合，会触发`error`事件并传递错误信息。如果校验通过，可以调用`clear-error`清除错误。