element-ui中DateTimePicker 日期时间选择器最长只能选一年的时间根据用户选择的开始来决定开始时间

DateTimePicker组件的默认配置是只能选择一年的时间，这是因为在实际开发中，大多数情况下只需要选择一年内的时间。

如果需要选择更长时间范围的时间，可以通过设置DateTimePicker组件的属性来实现。具体来说，可以通过设置start-date和end-date属性来限制可选的时间范围。例如，设置start-date为"1990-01-01"，end-date为"2030-12-31"，就可以选择1990年到2030年之间的任意时间。

另外，如果需要根据用户选择的开始时间来动态设置可选的时间范围，可以通过监听DateTimePicker组件的change事件，在事件回调函数中动态设置start-date和end-date属性。例如，当用户选择了2020年作为开始时间时，可以将end-date设置为"2021-12-31"，这样就可以选择2020年到2021年之间的任意时间。

下面是一个示例代码：

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      @change="handleStartDateChange"
    ></el-date-picker>
    <el-date-picker
      v-model="endDate"
      type="datetime"
      placeholder="选择结束日期时间"
      :start-date="startDate"
      :end-date="endDateLimit"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: null,
      endDate: null,
      endDateLimit: null,
    };
  },
  methods: {
    handleStartDateChange() {
      if (this.startDate) {
        const year = new Date(this.startDate).getFullYear();
        this.endDateLimit = `${year + 1}-12-31 23:59:59`;
      } else {
        this.endDateLimit = null;
      }
    },
  },
};
</script>

在上面的代码中，我们通过监听startDate的change事件，在事件回调函数中动态设置endDateLimit属性。当startDate有值时，我们将endDateLimit设置为startDate所在年份的下一年的最后一天；当startDate为空时，我们将endDateLimit设置为null，表示不限制可选时间范围。在DateTimePicker组件中，我们将start-date属性绑定到startDate，将end-date属性绑定到endDateLimit，这样就可以根据用户选择的开始时间动态设置可选的时间范围了。