vue2 elementui 选择三个以及以上年份

在Vue 2和Element UI中实现选择三个及年份的功能，可以使用Element UI的DatePicker组件结合自定义的校验规则来实现。具体步骤如下：

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"
      :disabledDate="disabledDate"
    ></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;
        }
      }
    };
  },
  methods: {
    disabledDate(time) {
      const selectedCount = this.selectedYears.length;
      return selectedCount >= 3; // 限制选择三个及以上年份
    }
  }
};
</script>

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

在`pickerOptions`对象中的`disabledDate`函数中，我们禁用了除了当前年份和前一年之外的所有日期。

在Vue组件的`methods`选项中，我们定义了一个名为`disabledDate`的方法，该方法用于自定义校验规则。在该方法中，我们获取已选择的年份数量，然后通过判断数量是否大于等于3来决定是否禁用其他日期。

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