elementui日历动态数据

element-ui的日历组件可以通过设置`range`属性来选择日期范围，同时可以通过设置`disabled-date`属性来禁用某些日期。如果需要动态设置可选日期，可以通过在父组件中监听子组件的`update:picker-date-visible`事件，在事件回调函数中修改`picker-date-visible`属性的值，从而动态更新可选日期。

具体实现可以参考以下代码：

<template>
  <el-date-picker
    v-model="date"
    type="daterange"
    :picker-options="pickerOptions"
    @update:picker-date-visible="handlePickerDateVisible"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate: (time) => {
          // 禁用2021年1月1日之前的所有日期
          return time.getTime() < new Date('2021-01-01').getTime()
        }
      }
    }
  },
  methods: {
    handlePickerDateVisible(visible) {
      // 动态更新可选日期
      if (visible) {
        this.pickerOptions.disabledDate = (time) => {
          // 禁用2021年1月1日之前和之后的所有日期
          return time.getTime() < new Date('2021-01-01').getTime() || time.getTime() > new Date('2022-01-01').getTime()
        }
      } else {
        this.pickerOptions.disabledDate = (time) => {
          // 禁用2021年1月1日之前的所有日期
          return time.getTime() < new Date('2021-01-01').getTime()
        }
      }
    }
  }
}
</script>