Element Ui 选择年份控制范围

在使用 Element UI 进行开发时，我们经常会遇到需要选择年份的场景，例如在表单中选择用户的出生年份等。Element UI 提供了 DatePicker 组件，可以方便地实现年份的选择，同时可以通过设置一些参数来控制年份的范围。

实现年份选择

要使用 DatePicker 组件来实现年份的选择，需要先引入相应的文件。

import Vue from 'vue';
import { DatePicker } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(DatePicker);

然后在模板中使用 DatePicker 组件，并设置 type 属性为 year，即可显示一个年份选择器。

<template>
  <div>
    <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年份"
    ></el-date-picker>
  </div>
</template>

在上面的代码中，我们使用 v-model 指令来双向绑定选中的年份，placeholder 属性设置了输入框的占位文字。

控制年份范围

有时候我们需要限制用户选择的年份范围，例如只能选择最近 10 年的年份。Element UI 提供了 range 属性可以帮助我们实现这个功能。

<template>
  <div>
    <el-date-picker
      v-model="year"
      type="year"
      :range="[currentYear - 10, currentYear]"
      placeholder="选择年份"
    ></el-date-picker>
  </div>
</template>

在上面的代码中，我们通过计算属性和数据绑定来动态设置年份选择的范围。在 range 数组中，我们通过 currentYear - 10 和 currentYear 来设置最小年份和最大年份。

示例代码

为了更好地理解如何实现年份的选择和控制范围，以下是一个完整的示例代码。

<template>
  <div>
    <el-date-picker
      v-model="year"
      type="year"
      :range="[currentYear - 10, currentYear]"
      placeholder="选择年份"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: null,
      currentYear: new Date().getFullYear(),
    };
  },
};
</script>

上面的代码中，我们在 data 中定义了 year 和 currentYear 数据项，year 用于绑定选中的年份，currentYear 用于获取当前年份。通过计算 currentYear - 10 和 currentYear，我们实现了只能选择最近 10 年的年份。

通过以上的步骤，我们就可以在 Element UI 中实现年份的选择控制范围了。

希望这篇博客对你有所帮助！