Element-UI plus 自定义-下拉框选择年份【vue3】

1.实现效果


2.实现代码展示

javascript 复制代码
<template>
	<el-select v-model="selectedYear" placeholder="请选择">
	  <el-option
		v-for="year in yearOptions"
		:key="year"
		:label="year"
		:value="year">
	  </el-option>
	</el-select>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';
  import { getCurrentInstance } from 'vue';

  const selectedYear = ref('');
  const yearOptions = ref([]);

  onMounted(() => {
	const currentYear = new Date().getFullYear();
	selectedYear.value = String(currentYear);
	for (let i = currentYear; i >= 2010; i--) {
	  yearOptions.value.push(String(i));
	}
  });
  </script>

相关推荐
new code Boy17 分钟前
escape谨慎使用
前端·javascript·vue.js
奶球不是球19 分钟前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
叠叠乐35 分钟前
robot_state_publisher 参数
java·前端·算法
Kiri霧35 分钟前
Range循环和切片
前端·后端·学习·golang
小张快跑。44 分钟前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet
傻啦嘿哟1 小时前
实战:用Splash搞定JavaScript密集型网页渲染
开发语言·javascript·ecmascript
小白阿龙1 小时前
Flex布局子元素无法垂直居中
前端
秋田君1 小时前
前端工程化部署入门:Windows + Nginx 实现多项目独立托管与跨域解决方案
前端·windows·nginx
冰敷逆向1 小时前
苏宁滑块VMP深入剖析(一):解混淆篇
javascript·爬虫·安全·web
江城开朗的豌豆1 小时前
阿里邮件下载器使用说明
前端