elementUI 年份范围选择器实现

在使用 Element UI 的年份范围选择器时，可以使用 <el-date-picker> 组件并设置 type 属性为 year 以及 format 属性为 yyyy。以下是一个简单的例子：

<template>
  <el-date-picker
    v-model="yearRange"
    type="year"
    format="yyyy"
    value-format="yyyy"
    placeholder="选择年份"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      yearRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '今年',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0, 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '去年',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear() - 1, 0, 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三年',
          onClick(picker) {
            const end = new Date();
            const start = new Date(end.getFullYear() - 3, 0, 1);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  }
};
</script>

在这个例子中，yearRange 是一个数组，用来存储选中的年份范围。pickerOptions 用于配置快捷选项，例如“今年”、“去年”和“最近三年”。当用户点击这些快捷选项时，会通过事件发送器 $emit 触发 pick 事件，并将对应的年份范围作为参数传递给 v-model 绑定的 yearRange 数组。