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

Element UI 的日期范围选择器默认提供了年、月、日的选择，而季度选择需要自定义，可以通过以下步骤实现：

1. 在日期范围选择器组件上添加一个自定义的 slot，用于放置季度选择器的内容：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  :picker-options="pickerOptions">
  <template #range-left>
    <!-- 季度选择器内容 -->
  </template>
</el-date-picker>

2. 在 data 中定义季度选择器的数据：

data() {
  return {
    quarters: [
      { label: '第一季度', value: [1, 3] },
      { label: '第二季度', value: [4, 6] },
      { label: '第三季度', value: [7, 9] },
      { label: '第四季度', value: [10, 12] }
    ],
    pickerOptions: {
      shortcuts: this.quarters.map(q => ({
        text: q.label,
        onClick: () => {
          const [startMonth, endMonth] = q.value;
          const startDate = new Date(new Date().getFullYear(), startMonth - 1, 1);
          const endDate = new Date(new Date().getFullYear(), endMonth, 0);
          this.dateRange = [startDate, endDate];
        }
      }))
    },
    dateRange: []
  }
}

3. 在 pickerOptions 中定义季度选择器的快捷选项，每个选项都包含文本和点击事件，点击事件会根据选中的季度计算出起止日期，并将其赋值给日期范围选择器的 v-model。

这样就可以在 Element UI 的日期范围选择器上实现季度选择了。