element el-date-picker 年范围选择封装

Element UI 的 `el-date-picker` 组件提供了一个强大的日期选择功能，其中包含年份范围选择的能力。当你需要让用户选择一个起始年份到结束年份之间的日期时，可以考虑以下步骤来封装这个功能：

1. **基础组件**: 首先，确保你已经引入了 Element UI 的 `el-date-picker` 和相关样式库。

<template>
  <el-date-picker
    v-model="yearRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      yearRange: ['', ''],
      pickerOptions: {
        disabledDate: (current) => {
          // 可以添加自定义的禁用日期规则
          if (current && current.getFullYear() > this.yearEnd) {
            return true;
          }
          return false;
        },
      },
    };
  },
  computed: {
    yearEnd() {
      // 获取当前年份并设置最大选择年份
      return new Date().getFullYear();
    },
  },
};
</script>

2. **属性配置**:
- `v-model` 对象有两个空字符串数组 `['', '']` 表示用户还未选择任何日期，你可以根据需求更改初始状态。
- `disabledDate` 属性用于设置不允许选择的日期，这里我们设置了选择的结束年份不能超过当前年份。

3. **动态限制**:
- `pickerOptions` 中的 `disabledDate` 属性可以根据实际需要调整，例如如果有一个固定的最大选择年限，可以在计算属性 `yearEnd` 中设置。

4. **事件监听**:
如果你需要在用户选择日期后做额外的操作，可以监听 `confirm` 或者 `clear` 等事件。

封装完成后，就可以在其他组件中复用这个自定义的年范围日期选择器了。