基于vue2+elementUI年份范围选择器

要创建一个基于Vue 2和Element UI的年份范围选择器，你可以使用Element UI的el-date-picker组件并设置其type属性为year以及format属性为yyyy来确保只选择年份。以下是一个简单的例子：

<template>
  <el-row>
    <el-col :span="12">
      <el-date-picker
        v-model="startYear"
        type="year"
        format="yyyy"
        value-format="yyyy"
        placeholder="选择开始年份">
      </el-date-picker>
    </el-col>
    <el-col :span="12">
      <el-date-picker
        v-model="endYear"
        type="year"
        format="yyyy"
        value-format="yyyy"
        placeholder="选择结束年份"
        :picker-options="endYearOptions">
      </el-date-picker>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      startYear: '',
      endYear: '',
      endYearOptions: {
        disabledDate: time => {
          if (this.startYear) {
            // 禁用小于开始年份的日期
            return time.getTime() < new Date(this.startYear).getTime() - 8.64e7;
          }
        }
      }
    };
  },
  watch: {
    startYear(val) {
      if (val) {
        this.endYearOptions = {
          disabledDate: time => {
            if (this.startYear) {
              // 禁用小于开始年份的日期
              return time.getTime() < new Date(val).getTime() - 8.64e7;
            }
          }
        };
      }
    }
  }
};
</script>

在这个例子中，我们有两个el-date-picker组件，分别用于选择开始年份和结束年份。结束年份的选择器有一个picker-options配置，它基于开始年份动态地禁用了一些日期。这样，用户就不能选择小于开始年份的日期。记得在你的项目中要先安装并导入Element UI。