el-date-picker 组件 按照年份显示范围具体代码

在 `el-date-picker` 组件中，可以通过设置 `picker-options` 属性来指定年份显示范围。具体代码如下：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    :picker-options="pickerOptions"
    placeholder="选择日期">
  </el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        disabledDate: (time) => {
          // 获取当前年份
          const currentYear = new Date().getFullYear();
          // 获取最小年份和最大年份
          const minYear = currentYear - 10;
          const maxYear = currentYear + 10;
          // 只允许选择指定年份范围内的日期
          return time.getFullYear() < minYear || time.getFullYear() > maxYear;
        }
      }
    };
  }
};
</script>

在上面的代码中，我们通过设置 `picker-options` 属性来指定 `disabledDate` 函数，该函数用来指定哪些日期是禁用的。在 `disabledDate` 函数中，我们首先获取当前年份，然后计算出最小年份和最大年份，最后判断当前日期是否在这个范围内。如果不在范围内，就禁用该日期。这样就能实现按照年份显示范围的功能了。