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

 

 默认显示当年当季当月

  <label class="font-weight">时间范围</label>&nbsp;&nbsp;

                 <el-cascader
              placeholder="请选择"
              :options="timeOption"
              filterable
              clearable
              change-on-select
              v-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);
    },

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

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

相关文章

深眸科技以自研算法+先进硬件,创新打造AI视觉一体化解决方案

工业视觉软硬件一体化解决方案&#xff1a;是以工业AI视觉技术为核心&#xff0c;通过集成工业相机等视觉硬件、电控系统和机械系统等自动化设备以及算法平台等软件应用&#xff0c;为工业自动化降本增效提质。 深眸科技为进一步巩固和加强技术领先优势&#xff0c;创新打造的…

DBeaver连接本地MySQL

原文&#xff1a; DBeaver21.3.0安装与连接本地MySQL_dbeaver创建本地数据库_傅大胖的博客-CSDN博客 其他&#xff1a; mysql 的驱动下载地址&#xff1a; Central Repository: mysql/mysql-connector-java ​​​​​​​

一行代码搞定GPT4.0禁止升级开通

GPT4.0官方停止开通&#xff1f;看我一行代码就搞定他&#xff0c;又可以愉快的充值升级了 首先打开你的chatgpt的界面 正常点击这个升级是没有用的 这个界面中windows用户按键盘的F12打开开发者工具 mac电脑点菜单栏的开发–页面检查 然后输入这一串命令并回车 等待两…

预约按摩小程序功能及使用指南;

小程序预约按摩功能及使用指南&#xff1a; 1. 注册登录&#xff1a;用户可选择通过账号密码或微信一键登录&#xff0c;便捷注册&#xff0c;轻松管理预约服务。 2. 查找店铺&#xff1a;展示附近的按摩店铺信息&#xff0c;用户可根据需求选择合适的店铺进行预约。 3. 选择服…

SpringBoot2—运维实用篇

目录 打包与运行 • 程序打包与运行&#xff08;Windows版&#xff09; • 程序运行&#xff08;Linux版&#xff09; 配置高级 • 临时属性设置 • 配置文件分类 • 自定义配置文件 多环境开发 多环境开发&#xff08;yaml单一文件版&#xff09; 多环境开发&am…

划片机新手教程:从准备工作到注意事项全解析!

随着科技的飞速发展&#xff0c;划片机已成为半导体行业不可或缺的一部分。对于新手来说&#xff0c;如何正确操作划片机显得尤为重要。以下是新手操作划片机的步骤和建议。 一、准备工作 在开始操作划片机之前&#xff0c;首先需要准备好以下工具和材料&#xff1a; 1. 划片机…

大结局!OpenAI创始人奥特曼和 Greg Brockman 将加入微软!!!

持续48小时的OpenAI政变大戏终于迎来了大结局&#xff01; 微软堪称最大赢家&#x1f4a5;&#x1f4a5;&#x1f4a5; 微软CEO刚刚宣布&#xff1a; 我们仍然致力于与 OpenAI 的合作伙伴关系&#xff0c;并对我们的产品路线图、我们在 Microsoft Ignite 上宣布的一切继续创…

8年经验之谈 —— 如何使用自动化工具编写测试用例?

以下为作者观点&#xff0c;仅供参考&#xff1a; 在快速变化的软件开发领域&#xff0c;保证应用程序的可靠性和质量至关重要。随着应用程序复杂性和规模的不断增加&#xff0c;仅手动测试无法满足行业需求。 这就是测试自动化发挥作用的地方&#xff0c;它使软件测试人员能…

【理解ARM架构】不同方式点灯 | ARM架构简介 | 常见汇编指令 | C与汇编

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《理解ARM架构》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f3c0;直接操作寄存器点亮LED灯&#x1f3c0;地址空间&#x1f3c0;ARM内部的寄存…

【深度学习实验】注意力机制(三):打分函数——加性注意力模型

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 理论介绍a. 认知神经学中的注意力b. 注意力机制 1. 注意力权重矩阵可视化&#xff08;矩阵热图&#xff09;2. 掩码Softmax 操作3. 打分函数——加性注意力模型1. 初始化2. 前向传播3. 内部组件…

Vue3 provide 和 inject 实现祖组件和后代组件通信

provide 和 inject 能够实现祖组件和其任意的后代组件之间通信&#xff1a; 一、provide 提供数据 我们在祖组件中使用provide 将数据提供出去。 使用provide 之前需要先进行引入&#xff1a; import { provide } from "vue"; 语法格式如下&#xff1a; provide(&q…

C++类与对象(3)—拷贝构造函数运算符重载

目录 一、拷贝构造函数 1、定义 2、特征 3、内置与自定义类型 4、const修饰参数 5、默认生成 浅拷贝 深拷贝 6、总结 二、运算符重载 1、定义 2、判断是否相等 3、比较大小 4、赋值 5、总结 一、拷贝构造函数 1、定义 拷贝构造函数&#xff1a;只有单个形参…

pnpm 管理依赖包是如何节省磁盘空间的?

npm 存在的问题 我们经常使用 npm 来管理 node 项目中的包&#xff0c;从 package.json 中读取配置将依赖下载到本地&#xff0c;以保障项目的正常运行。 当项目数量多时&#xff0c;这样的包管理方式会非常的占用电脑内存。由于每个项目都有属于自己的依赖&#xff0c;每个项…

【Zabbix监控二】之zabbix自定义监控内容案例(自动发现、自动注册)

一、自定义监控内容 案例&#xff1a;自定义监控客户端服务器登录的人数 需求&#xff1a;限制登录人数不超过3个人&#xff0c;超过5个人就发出报警 1、在客户端创建自定义key 明确需要执行的linux命令 创建zabbix监控项配置文件&#xff0c;用于自定义Key #在zabbix的配…

支持对协议和会话分享动作进行授权,新增API Key白名单功能,JumpServer堡垒机v3.9.0发布

2023年11月20日&#xff0c;JumpServer开源堡垒机正式发布v3.9.0版本。在这一版本中&#xff0c;JumpServer对授权功能进行了优化&#xff0c;增加了对“会话分享”及“资产协议”的配置&#xff0c;方便管理员以更细的颗粒度对各种资源进行控制&#xff1b;针对使用API Key与J…

基于yolov8的车牌检测训练全流程

YOLOv8 是Ultralytics的YOLO的最新版本。作为一种前沿、最先进(SOTA)的模型&#xff0c;YOLOv8在之前版本的成功基础上引入了新功能和改进&#xff0c;以提高性能、灵活性和效率。YOLOv8支持全范围的视觉AI任务&#xff0c;包括检测, 分割, 姿态估计, 跟踪, 和分类。这种多功能…

多目标应用:基于非支配排序的蜣螂优化算法NSDBO求解微电网多目标优化调度(MATLAB)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、基于非支配排序的蜣螂优化算法NSDBO 基于非支配排序的蜣螂优化算法NSDBO简介&#xff1a; https://blog.csdn.net/weixin46204734/article/details/128…

【LCM(潜在一致性模型)-5步即可高质量出图】

https://tianfeng.space/ 前言 由潜在一致性模型 (LCM) 生成的图像。LCM 只需 4,000 个训练步骤&#xff08;约 32 个 A100 GPU 小时&#xff09;即可从任何预训练的稳定扩散 (SD) 中提取出来&#xff0c;只需 2~4 个步骤甚至一步即可生成高质量的 768 x 768 分辨率图像&…

数据结构与算法 | 图(Graph)

图的分类&#xff08;Types Of Graph&#xff09; 可以看到图的基本的结构非常简单&#xff0c;约束也很少&#xff0c;如果在其中加上各种条件约束就可以定义各种类型的图。 约束边或者顶点个数来分类&#xff1a; 零图&#xff08;Null graph&#xff09;&#xff1a;只有顶…