Element-UI 自定义-下拉框选择年份

1.实现效果

        场景表达：   默认展示当年的年份，默认展示前7年的年份

2.实现思路

1. 创建一个新的Vue组件。

2. 使用<select>元素和v-for指令来渲染年份下拉列表。

3. 使用v-model来绑定选中的年份值。

---

3.实现代码展示

<template>
	<div>
	  <el-select v-model="form.recentYear" @change="selectyare" placeholder="请选择" clearable>
		<el-option
		  v-for="item in years"
		  :key="item.value"
		  :label="item.label"
		  :value="item.value">
		</el-option>
	  </el-select>
	</div>
  </template>
  <script>
	export default {
	  data(){
		return{
		  years:[],
		  form:{
			recentYear:''
		  }
		}
	  },
	  methods:{
		init(){
		  var myDate = new Date;
		  var year = myDate.getFullYear();//获取当前年
		  this.initSelectYear(year)
		  this.form.recentYear = year;
		},
		initSelectYear(year){
		  this.years = [];
		  for(let i=0;i<30;i++){
			this.years.push({value:(year - i),label:(year - i)+ "年"});
		  }
		},
		selectyare(value){
		  this.form.recentYear = value
		},
	  },
	  created() {
		this.init()
	  }
	}
  </script>

---