vue2 el-plus组件年份选择器 选择年份群建范围 怎么写

你可以使用 `el-date-picker` 组件结合 `picker-options` 属性来实现选择年份的范围。

具体步骤如下：

1. 在 `el-date-picker` 组件中添加 `picker-options` 属性，并设置其 `shortcuts` 属性。

   <el-date-picker
     v-model="year"
     type="year"
     :picker-options="pickerOptions">
   </el-date-picker>

2. 在 `data` 中添加 `pickerOptions` 对象，并设置其 `shortcuts` 属性。

   data() {
     return {
       year: null,
       pickerOptions: {
         shortcuts: [{
           text: '最近 5 年',
           onClick(picker) {
             const end = new Date();
             const start = new Date();
             start.setFullYear(end.getFullYear() - 4);
             picker.$emit('pick', [start, end]);
           }
         }, {
           text: '最近 10 年',
           onClick(picker) {
             const end = new Date();
             const start = new Date();
             start.setFullYear(end.getFullYear() - 9);
             picker.$emit('pick', [start, end]);
           }
         }, {
           text: '最近 20 年',
           onClick(picker) {
             const end = new Date();
             const start = new Date();
             start.setFullYear(end.getFullYear() - 19);
             picker.$emit('pick', [start, end]);
           }
         }]
       }
     }
   }

3. 在 `shortcuts` 数组中添加一个对象，设置其 `text` 属性为你想要显示的文本，设置其 `onClick` 属性为一个回调函数，用于设置选择范围。

   {
     text: '最近 5 年',
     onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setFullYear(end.getFullYear() - 4);
       picker.$emit('pick', [start, end]);
     }
   }

在回调函数中，我们先获取当前时间，然后根据需要的年份范围设置 `start` 和 `end` 时间，最后将时间范围通过 `$emit` 方法传递给组件。

你可以根据需要添加更多的选项。