el-date-picker type="daterange" 禁选时间动态更新

要实现`el-date-picker`组件的禁选时间动态更新，您可以使用`watch`属性监听开始时间的变化，并在其中更新禁选日期的逻辑。以下是一个示例代码：

<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) {
          // 在这里编写禁用日期的逻辑
          // 如果要禁用特定日期，可以通过比较年、月、日等来判断
          // 返回 true 表示禁用该日期，返回 false 表示启用该日期

          // 示例：禁用开始时间之前的日期和结束时间之后的日期
          const startDate = new Date(this.dateRange[0]);
          const endDate = new Date(this.dateRange[1]);

          return (
            time < this.getDisabledStartDate(startDate) ||
            time > this.getDisabledEndDate(endDate)
          );
        },
      },
    };
  },
  watch: {
    dateRange(newVal) {
      // 在这里更新禁选日期的逻辑
      // 可以根据需要重新计算禁选日期的范围并更新到pickerOptions中
    },
  },
  methods: {
    getDisabledStartDate(startDate) {
      // 返回禁选的开始日期
      // 示例：禁用开始时间之前一个月的日期
      return new Date(startDate.getFullYear(), startDate.getMonth() - 1, startDate.getDate());
    },
    getDisabledEndDate(endDate) {
      // 返回禁选的结束日期
      // 示例：禁用结束时间之后一个月的日期
      return new Date(endDate.getFullYear(), endDate.getMonth() + 1, endDate.getDate());
    },
  },
};
</script>

在上面的示例中，我们使用`watch`属性监听`dateRange`的变化，每当选择的日期范围发生变化时，`watch`中的回调函数会被触发。在该回调函数中，您可以根据新的开始时间和结束时间重新计算禁选日期的范围，并将更新后的禁选日期逻辑更新到`pickerOptions`对象中的`disabledDate`函数中。

在`disabledDate`函数中，我们示范了禁用开始时间之前一个月的日期和禁用结束时间之后一个月的日期。您可以根据需求编写具体的逻辑来禁用特定的日期范围。

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