elementUi中el-date-picker；两个日期选择器第二个必须在第一个之后

在Element UI中，如果你想要实现两个日期选择器，其中第二个必须在第一个之后的日期选择，你可以通过监听第一个日期选择器的值变化，然后动态设置第二个日期选择器的最小日期。

以下是一个简单的例子：

<template>
  <el-row>
    <el-col :span="11">
      <el-date-picker
        v-model="startDate"
        type="date"
        placeholder="选择开始日期"
        @change="handleStartDateChange">
      </el-date-picker>
    </el-col>
    <el-col :span="2">
      <div style="text-align: center;">至</div>
    </el-col>
    <el-col :span="11">
      <el-date-picker
        v-model="endDate"
        type="date"
        placeholder="选择结束日期"
        :picker-options="endDatePickerOptions">
      </el-date-picker>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      endDatePickerOptions: {
        disabledDate: time => {
          if (this.startDate) {
            return time.getTime() < this.startDate;
          }
        }
      }
    };
  },
  methods: {
    handleStartDateChange(value) {
      if (value) {
        this.startDate = new Date(value).getTime();
      } else {
        this.startDate = null;
      }
    }
  }
};
</script>

在这个例子中，startDate 和 endDate 分别绑定了第一个和第二个日期选择器的 v-model。endDatePickerOptions 是一个配置对象，它的 disabledDate 函数用来禁用在 startDate 之前的日期。handleStartDateChange 方法在 startDate 改变时被触发，更新 endDatePickerOptions 以便动态地更新第二个日期选择器的可选范围。