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>




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构复习指导之线性表(线性表的顺序表示)

文章目录 线性表的顺序表示 1.顺序表的定义 1.1知识总览 1.2顺序表 1.3静态分配 1.4动态分配 1.5顺序表的特点 1.6知识回顾与重要考点 线性表的顺序表示 1.顺序表的定义 1.1知识总览 1.2顺序表 线性表的顺序存储又称顺序表。它是用一组地址连续的存储单元依次存储线性…

spring04:注解使用

spring04&#xff1a;注解使用 文章目录 spring04&#xff1a;注解使用前言&#xff1a;一、 Autowired Qualifier和 Resource 和 nullable1. Autowired 2. Resource &#xff1a;使用在类的属性上面&#xff08;和Autowired类似&#xff09;3. nullable 二、 Component 和 Re…

JetBrains RubyMine 2024.1 发布 - 最智能的 Ruby 与 Rails IDE

JetBrains RubyMine 2024.1 发布 - 最智能的 Ruby 与 Rails IDE 请访问原文链接&#xff1a;JetBrains RubyMine 2024.1 (macOS, Linux, Windows) - 最智能的 Ruby 与 Rails IDE&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org…

ELK日志

​​​​​​​

JavaGUI编程

目录 GUI概念 Swing概念 组件 容器组件 窗口&#xff08;JFrame&#xff09; 代码 运行 面板&#xff08;JPanel&#xff09; 代码 运行 布局管理器 FlowLayout 代码 运行 BorderLayout 代码 运行 GridLayout 代码 运行 常用组件 标签(JLabel) 代码 运…

Vue列表渲染

一、Vue列表渲染 1.用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法&#xff0c;其中 items 是源数据数组&#xff0c;而 item 则是被迭代的数组元素的别名。 <ul id"exampl…

Agent调研--19类Agent框架对比

代理&#xff08;Agent&#xff09;指能自主感知环境并采取行动实现目标的智能体&#xff0c;即AI作为一个人或一个组织的代表&#xff0c;进行某种特定行为和交易&#xff0c;降低一个人或组织的工作复杂程度&#xff0c;减少工作量和沟通成本。 背景 目前&#xff0c;我们在探…

Qt 4.8中的ftp 功能在Qt 5.9.4 之前版本中的应用

很久以前也就是在Qt 4.8版本后&#xff0c; 如果想要用Qt ftp功能&#xff0c;是把Qt 4.8中的QFtp源码拉出来&#xff0c;编译、修改然后就能在Qt 其他版本使用。 但每一次升级Qt 版本&#xff0c;就要把Qt ftp 源码在相应的Qt 版本编译&#xff0c;修改。太麻烦了&#xff0c;…

C#下Httpclient post请求获取令牌

1.postman测试ok 2.C#代码 public static async Task<string> testGetToken(string URL, string param){string responseBody "eee";//using (var clientHandler new HttpClientHandler()){ var handler new HttpClientHandler();handler.ServerCertificat…

【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

文章目录 一、对象使用1、使用字面量创建对象要点2、调用对象属性3、调用对象方法 二、变量与属性区别三、函数与方法区别 一、对象使用 1、使用字面量创建对象要点 使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对…

Android Studio开发学习(六)———TableLayout(表格布局)、FrameLayout(帧布局)

目录 前言 一、Tablelayout &#xff08;一&#xff09;Tablelayout的相关简介 &#xff08;二&#xff09;TableLayout使用方法 1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行&#xff0c;不留空白) 2.多个组件占据一行&#xff0c;则配合TableRow实现…

Redis中的集群(六)

集群 ASK错误 在进行重新分片期间&#xff0c;源节点向目标节点迁移一个槽的过程中&#xff0c;可能会出现这样一种情况:属于被迁移槽的一部分键值对保存在源节点里面&#xff0c;而另一部分键值对则保存在目标节点里面。当客户端向源节点发送一个与数据库有关的命令&#xf…

【PHP程序设计(高阶版)】——PHP操作MySQL教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Linux Ubantu安装配置教程

Ubuntu是一个基于Linux的开源操作系统&#xff0c;它遵循GNU通用公共许可证&#xff0c;用户可以自由使用、复制、分发和修改。它提供直观易用的桌面环境&#xff0c;适合新手和有经验用户。Ubuntu有强大的软件中心&#xff0c;支持多硬件架构&#xff0c;注重安全和稳定&#…

Hidl 学习总结 2

1、Android apk 调用Hidl处理 app添加对应的hidl jar包 2、MainActivity 添加如下代码 package com.example.test2;import androidx.appcompat.app.AppCompatActivity; import vendor.hardware.test.V1_0.ITest; import vendor.hardware.test.V1_0.ITestCmdCallback; import …

【精品PPT】智慧路灯大数据平台整体建设实施方案(免费下载)

1、知识星球下载&#xff1a; 如需下载完整PPTX可编辑源文件&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/19QeHVt8y 2、免费领取步骤&#xff1a; 【1】关注公众号 方案驿站 【2】私信发送 【智慧路灯大数据平台】 【3】获取本方案PDF下载链接&#xff0c;直…

前端之Vuex

主要解决租价之间传值的问题。 npm install vuex3/4state:用于存储应用程序的状态数据 mutations:用于修改状态数据&#xff0c;外部不要直接对state进行修改。 getter:对状态数据进行处理例如过滤操作。 action:异步操作&#xff0c;网络请求是异步操作&#xff0c;该步骤在a…

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索及数据获取配置项

搜索及数据获取配置项 搜索及数据获取配置项属性&#xff1a; noSearchModel&#xff08;无表单搜索标识&#xff09;属性&#xff1a;changeToSearch&#xff08;表单change事件是否触发搜索 &#xff09;属性&#xff1a; changeParams&#xff08;参数预处理【可异步】 &…

智慧园区平台再升级!智慧迭代,服务升级

伴随物联网、人工智能等技术的迅速发展和智能化水平的提高&#xff0c;智慧园区成为了现代区域经济高质量发展的重要组成部分&#xff0c;上承智慧城市的建设&#xff0c;下接智慧运营和管理。智慧园区是一种基于信息技术的智能化管理模式&#xff0c;通过物联网、大数据、人工…

Day05-SHELL自动化编程-数组-三剑客进阶

Day05-SHELL自动化编程-数组-三剑客进阶 14 Shell编程-数组14.1 概述14.2 Shell数组赋值14.3 案例14.4 小结 15. Shell-编程-Debug全流程15.1 书写习惯15.2 调试方法 16. 再战三剑客16.1 sed与变量16.2 awk1&#xff09;指哪打哪-案例2&#xff09;awk的判断与循环3&#xff09…