el-date-picker的使用

简介: el-date-picker的使用

在做项目的时候用到了element-plus组件里的el-date-picker

需求是默认是当前的年份,然后可以切换年份并请求列表更换数据

所以就需要先给组件赋一个默认当前年份的值

再就是获取到更改后的年份

<el-date-picker v-model="pickYear" type="year" @change="changeYear"  placeholder="请选择年份" />

1,绑定一个v-model和一个change事件

2,获取到当前时间的年(new Date)

var date = new Date();
  var tYear = date.getFullYear();
  pickYear.value = tYear.toString();
//getFullYear方法可以获取到当前的年份
//toString是讲获取到的年份转换为字符串,默认是数字,数字赋值赋给组件的话赋不上去

3,获取到改变时的年份

const changeYear = ()=>{
console.log(pickYear.value.getFullYear());
}
//打印刚才v-model绑定的变量即可获取
相关文章
element-plus:el-date-picker日期只选择年月不要日
element-plus:el-date-picker日期只选择年月不要日
810 0
element-使用el-date-picker 选择日期后返回周几(整理)
element-使用el-date-picker 选择日期后返回周几(整理)
Element el-color-picker 颜色选择器详解
本文目录 1. 前言 2. 基本用法 3. 带默认值 4. 调整尺寸 5. 小结
2617 0
Element el-color-picker 颜色选择器详解
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5060 0
Element el-date-picker 日期选择器详解
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6048 0
Element el-row el-col 布局组件详解
|
7月前
vue3-element-admin的组件el-time-picker设置只能选择上午或下午
vue3-element-admin的组件el-time-picker设置只能选择上午或下午
200 0
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
4233 0
|
7月前
el-date-picker组件的picker-options常规属性设置
el-date-picker组件的picker-options常规属性设置
element ui el-date-picker 禁止选择指定日期
element ui el-date-picker 禁止选择指定日期
270 0