vue elementui 年份多选

在Vue和Element UI中实现年份的多选功能，可以使用Element UI提供的DatePicker组件，并通过设置type属性为"daterange"来实现多选年份的效果。具体步骤如下：

1. 首先，确保你已经引入了Vue和Element UI库，并正确注册Element UI组件。

2. 在你的Vue组件中，使用DatePicker组件，并设置type属性为"daterange"。

<template>
  <div>
    <el-date-picker
      v-model="selectedYears"
      type="daterange"
      format="yyyy"
      value-format="yyyy"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedYears: [], // 存储选择的年份
      pickerOptions: {
        disabledDate(time) {
          // 禁用除了当前年份和前一年之外的所有日期
          const currentYear = new Date().getFullYear();
          const prevYear = currentYear - 1;
          const year = time.getFullYear();
          return year > currentYear || year < prevYear;
        },
        shortcuts: [
          // 自定义快捷选项，比如最近5年
          {
            text: '最近5年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setFullYear(end.getFullYear() - 5);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    };
  }
};
</script>

在上述代码中，我们使用了`v-model`指令来绑定选择的年份数组`selectedYears`。`format`和`value-format`属性分别用于设置显示和绑定的年份格式为"yyyy"。

`pickerOptions`对象中的`disabledDate`函数用于禁用除了当前年份和前一年之外的所有日期，以确保只能选择当前年份和前一年的年份。

`shortcuts`属性可以用来添加自定义的快捷选项。在上述代码中，我们添加了一个名为"最近5年"的快捷选项，点击该选项将选择最近的5年。

通过以上步骤，你就可以在Vue和Element UI中实现年份的多选功能。