在Vue中结束时间不能小于开始时间（el-date-picker）

在Vue中，你可以使用el-form组件来验证el-date-picker的输入值，确保结束时间不早于开始时间。以下是一个简单的例子：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker v-model="form.startTime" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime">
      <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          startTime: '',
          endTime: ''
        },
        rules: {
          startTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' },
            {
              validator: (rule, value, callback) => {
                if (value && this.form.startTime && value < this.form.startTime) {
                  callback(new Error('结束时间不能早于开始时间'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            // 表单验证通过，执行提交操作
            console.log('提交的数据：', this.form);
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有两个日期选择器的表单，分别用于选择开始时间和结束时间。el-form的rules属性定义了每个字段的验证规则，其中endTime的验证规则包含一个自定义的验证函数，用于检查结束时间是否不早于开始时间。如果结束时间早于开始时间，会触发一个错误，并显示给用户。