el-date-picker type="daterange" 根据开始时间限制结束时间选择范围

您可以使用`picker-options`属性来限制el-date-picker的结束时间选择范围，根据开始时间来动态设置可选的结束日期范围。可以通过设置`picker-options`的`disabledDate`函数来实现此功能。以下是一个示例代码：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [], // 选择的日期范围
      pickerOptions: {
        disabledDate(time) {
          // 如果没有选择开始时间，则禁用所有结束时间
          if (!this.dateRange[0]) {
            return true;
          }
          // 获取选择的开始时间和当前时间
          const startDate = new Date(this.dateRange[0]);
          const endDate = new Date(time);
          // 计算开始时间到当前时间的天数差
          const daysDiff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
          // 设置结束时间可选范围为开始时间后30天内
          return daysDiff < 0 || daysDiff > 30;
        },
      },
    };
  },
};
</script>

在上面的示例中，`pickerOptions`对象中的`disabledDate`函数会根据传入的时间参数来判断该日期是否可选。首先检查是否已选择了开始时间（`this.dateRange[0]`），如果没有选择开始时间，则禁用所有结束时间。如果选择了开始时间，则创建了一个开始日期（startDate）和传入的时间作为结束日期（endDate），然后计算开始时间到结束时间的天数差（daysDiff）。如果天数差小于0或大于30（即超过30天），则被禁用。

希望这个解决方案对您有所帮助！