element ui 日期范围实现多年季度选择

Element UI 的日期范围选择器（<el-date-picker>）默认不支持选择多年季度，但是可以通过自定义快捷选项（shortcuts）来实现。

具体实现方式如下：

1. 在 <el-date-picker> 中设置 :shortcuts 属性，指定一个数组，数组中每个元素代表一个快捷选项。

2. 每个快捷选项包含两个属性：text 和 onClick。text 表示快捷选项的文本描述，onClick 是一个回调函数，表示用户点击快捷选项时的处理逻辑。

3. 在 onClick 回调函数中，可以先弹出一个对话框，让用户选择年份和季度。然后根据用户选择的年份和季度，计算出开始和结束日期，并使用 <el-date-picker> 的 props 和 events 来设置日期范围选择器的开始和结束日期。

代码示例：

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

<script>
export default {
  data() {
    return {
      dateRange: null,
      shortcuts: [
        {
          text: '选择多年季度',
          onClick: () => {
            this.showQuarterDialog().then((result) => {
              const { startYear, endYear, startQuarter, endQuarter } = result;
              const startDate = new Date(startYear, (startQuarter - 1) * 3, 1);
              const endDate = new Date(endYear, endQuarter * 3, 0);
              this.dateRange = [startDate, endDate];
            });
          }
        }
      ]
    };
  },
  methods: {
    showQuarterDialog() {
      return new Promise((resolve) => {
        // 弹出对话框，让用户选择年份和季度
        // ...
        // 假设用户选择了 2020 年第二季度到 2022 年第三季度
        resolve({
          startYear: 2020,
          endYear: 2022,
          startQuarter: 2,
          endQuarter: 3
        });
      });
    }
  }
};
</script>

注意事项：

1. 在计算结束日期时，需要使用 endQuarter * 3 和 0 来计算月份，因为 new Date(year, month, day) 中的 month 参数是从 0 开始计数的，且 day 参数表示月份中的第几天，如果 day 参数为 0，则表示上一个月的最后一天。

2. 在弹出对话框让用户选择年份和季度时，可以使用 Element UI 的对话框组件（<el-dialog>）或其他第三方组件库。