vue年季度月联动筛选(el-cascader实现)

 

 默认显示当年当季当月

  <label class="font-weight">时间范围</label>&nbsp;&nbsp;<el-cascaderplaceholder="请选择":options="timeOption"filterableclearablechange-on-selectv-model="timeRange":props="{emitPath: true}"@change="getPage()"></el-cascader>

 

 timeRange:'',//默认当年当季当月timeOption:[{value: '2023年',label: '2023年',children: [{value: '第一季度',label: '第一季度',children: [{value: '1月',label: '1月'},{value: '2月',label: '2月'},{value: '3月',label: '3月'}]}, {value: '第二季度',label: '第二季度',children: [{value: '4月',label: '4月'},{value: '5月',label: '5月'},{value: '6月',label: '6月'}]},  {value: '第三季度',label: '第三季度',children: [{value: '7月',label: '7月'},{value: '8月',label: '8月'},{value: '9月',label: '9月'}]}, {value: '第四季度',label: '第四季度',children: [{value: '10月',label: '10月'},{value: '11月',label: '11月'},{value: '12月',label: '12月'}]}]}],
created(){
this.getNowTimeRange();},getNowTimeRange() {//获取当前年
const year=new Date().getFullYear()+'年';
// 获取当前季度:var currMonth = new Date().getMonth() + 1;var currQuarter = Math.floor(currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1);const info = {1: "第一季度",2: "第二季度",3: "第三季度",4: "第四季度"};const quarter = info[currQuarter];//获取当前月const monthNum =new Date().getMonth() + 1;const nowMonth= monthNum+'月';this.timeRange=[year,quarter,nowMonth];console.log("%c Line:528 🍿", "color:#3f7cff",this.timeRange);},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 对图像进行聚类分析

import cv2 import numpy as np from sklearn.cluster import KMeans import time# 中文路径读取 def cv_imread(filePath, cv2_falgcv2.COLOR_BGR2RGB): cv_img cv2.imdecode(np.fromfile(filePath, dtypenp.uint8), cv2_falg) return cv_img# 自定义装饰器计算时间 def…

服务器 jupyter 文件名乱码问题

对于本台电脑&#xff0c;autodl服务器&#xff0c;上传中文文件时&#xff0c;从压缩包名到压缩包里的文件名先后会出现中文乱码的问题。 Xftp 首先是通过Xftp传输压缩包到Autodl服务器&#xff1a; 1、打开Xftp&#xff0c;进入软件主界面&#xff0c;点击右上角【文件】菜…

Hadoop学习笔记:运行wordcount对文件字符串进行统计案例

文/朱季谦 我最近使用四台Centos虚拟机搭建了一套分布式hadoop环境&#xff0c;简单模拟了线上上的hadoop真实分布式集群&#xff0c;主要用于业余学习大数据相关体系。 其中&#xff0c;一台服务器作为NameNode&#xff0c;一台作为Secondary NameNode&#xff0c;剩下两台当…

(一)RISC-V 指令集及寄存器介绍

1. RISC-V指令集介绍 RISC-V 念作 “risk-five”&#xff0c;代表着 Berkeley 所研发的第五代精简指令集。 该项目 2010 年始于加州大学伯克利&#xff08;Berkeley&#xff09;分校&#xff0c;希望选择一款 ISA用于科研和教学。经过前期多年的研究和选型&#xff0c;最终决定…

【C++】string类的介绍与使用

&#x1f9d1;‍&#x1f393;个人主页&#xff1a;简 料 &#x1f3c6;所属专栏&#xff1a;C &#x1f3c6;个人社区&#xff1a;越努力越幸运社区 &#x1f3c6;简 介&#xff1a;简料简料&#xff0c;简单有料~在校大学生一枚&#xff0c;专注C/C/GO的干货分…

通信原理板块——时分复用

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、基本概念 复用的目的是为了扩大…

Python批量备份交换机配置+自动巡检

自动巡检功能考虑到不同设备回显有所不同&#xff0c;需要大量正则匹配&#xff0c;暂时没时间搞这些&#xff0c;所以索性将命令回显全部显示&#xff0c;没做进一步的回显提取。 以下是程序运行示例&#xff1a;#自动备份配置&#xff1a; 备份完成后&#xff0c;将配置保存于…

Android加固为何重要?很多人不学

为什么要加固&#xff1f; APP加固是对APP代码逻辑的一种保护。原理是将应用文件进行某种形式的转换&#xff0c;包括不限于隐藏&#xff0c;混淆&#xff0c;加密等操作&#xff0c;进一步保护软件的利益不受损坏。总结主要有以下三方面预期效果&#xff1a; 1.防篡改&#x…

visionOS空间计算实战开发教程Day 5 纹理和材质

在​​Day 4​​​中我们使用了​​ImmersiveSpace​​并在其中添加了一个立方体&#xff0c;但对这个立方体我们只配置了长宽高&#xff0c;并没有做进一步的操作。 本文中我们会通过纹理和材质对这个立方体的六个面分别进行不同的绘制。首先我们将​​ImmersiveView​​分拆…

UE5的TimeLine的理解

一直以来&#xff0c;我对动画的理解一直是这样的&#xff1a; 所谓动画&#xff0c;就是可导致可视化内容变化的参数和时间的对应关系。 我不能说这个观点现在过时了&#xff0c;只能说自己狭隘了。因为UE的TimeLine的设计理念真让人竖大拇指。 当我第一次看到TimeLine节点的…

FreeSQL 基本使用

FreeSQL连接MySQL 安装 FeeSql相关库 FreeSql 基本库 FreeSql.DbContext FreeSql.Extensions.Linq linq语法扩展库 FreeSql.Provider.Mysql MySQL连接库 新建DbConent.cs public class Base{static string connstr "Data Source127.0.0.1;Port3306;User IDroot;Pa…

Ubuntu apt-get换源

一、参考资料 ubuntu16.04更换镜像源为阿里云镜像源 二、相关介绍 1. apt常用命令 sudo apt-get clean sudo apt-get update2. APT加速工具 轻量小巧的零配置 APT 加速工具&#xff1a;APT Proxy GitHub项目地址&#xff1a;apt-proxy 三、换源关键步骤 1. 更新阿里源 …

猫咪不长肉怎么回事?搬空家底的增肥效果好的猫罐头分享

秋冬到了&#xff0c;北方有供暖还好&#xff0c;咱南方的小猫咪全靠一身正气&#xff0c;不囤点脂肪天生怕冷的小猫咪要怎么过冬啊&#xff1f;咋吃都吃不胖的猫可愁怀铲屎官了&#xff0c;想想我新手养猫那些年&#xff0c;为了给我家猫养胖点我是做了不少努力&#xff0c;当…

地奥集团大健康产业再添解酒黑科技:“酒必妥”!

地奥集团成都药业股份有限公司隶属于地奥集团旗下的子公司&#xff0c;至今已经超过百年历史&#xff0c;主要围绕化学药品在耕耘奉献。尽管公司历来都低调&#xff0c;但是地奥这块牌子在质量把控&#xff0c;安全生产把控等药品领域还是响当当。历年来&#xff0c;公司持续对…

vue3-响应式函数

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue3-响应式函数 目录 ref 响应式函数 引言&#xff1a; ref 函数 reactive 函数 Reactive 与…

GNSS技术在交通运输领域的创新应用

全球导航卫星系统&#xff08;GNSS&#xff09;技术在交通运输领域发挥着越来越重要的作用&#xff0c;为汽车导航、航空、海运等交通模式提供了精准的定位和导航服务。本文将深入探讨GNSS技术在交通运输领域的应用&#xff0c;以及它对交通管理、安全性和效率的积极影响。 一、…

这些仪表板常用的数据分析模型,你都见过吗?

本文由葡萄城技术团队发布。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 ##前言 在数字化时代&#xff0c;数据已经成为了企业决策和管理的重要依据。而仪表板作为一种数据可视化工具&#x…

Linux inotify 文件监控

Linux 内核 2.6.13 以后&#xff0c;引入了 inotify 文件系统监控功能&#xff0c;通过 inotify 可以对敏感目录设置事件监听。这样的功能被也被包装成了一个文件监控神器 inotify-tools。 使用 inotify 进行文件监控的过程&#xff1a; 创建 inotify 实例&#xff0c;获取 i…

【代码随想录】算法训练计划28

回溯 1、491. 递增子序列 题目&#xff1a; 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以…

【Azure 架构师学习笔记】-Azure Storage Account(7)- 权限控制

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account&#xff08;6&#xff09;- File Layer 前言 存储帐户作为其中一个数据终端存储&#xff0c;对安全性的要求非常高&#xff0c;不管…