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

news2024/9/28 23:33:55

 

 默认显示当年当季当月

  <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);
    },

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

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

相关文章

Redis常用的八种场景

作为一名 Java后端人员&#xff0c;对 Redis肯定并不陌生&#xff0c;Redis作为一种内存数据库&#xff0c;以其速度之快在编程的舞台上纵横多年&#xff0c;那么&#xff0c;Redis到底适合哪些业务场景&#xff1f;今天就来聊一聊。 1. 缓存/数据库 缓存&#xff08;Cache&am…

Foodpanda API连接的艺术:无代码开发如何集成营销系统和广告推广工具

连接Foodpanda和电商平台的无代码开发 Foodpanda不仅是一家提供快速外卖服务的国际品牌&#xff0c;而且其创新的技术解决方案还能帮助电商企业优化系统运营。通过无代码开发的方法&#xff0c;即使没有专业的API开发知识&#xff0c;商家也能实现高效的电商系统和客服系统连接…

基于Android个人理财家庭收支系统uniAPP+vue -hbuiderx-微信小程序vj9n8

摘 要 个人理财APP设计的目的是为用户提供对活动信息和提醒信息管理等方面的平台。 与PC端应用程序相比&#xff0c;个人理财的设计旨在为用户提供一个个人理财信息的管理。用户可以通过APP及时收入信息和支出信息&#xff0c;并对提醒消息进行查看等。 个人理财APP是在Androi…

小程序中打印机纸张都支持哪些尺寸?

在小程序中添加打印机功能是一项非常实用的功能&#xff0c;它可以让用户方便地将小程序中的内容打印出来。然而&#xff0c;当用户想要打印内容时&#xff0c;他们可能会关心打印纸张支持哪些尺寸。打印机分为四种打印机&#xff1a;小票、标签、发货单和电子面单。下面具体介…

【Python常用函数】一文让你彻底掌握Python中的numpy.add函数

大数据时代的到来,使得很多工作都需要进行数据挖掘,从而发现更多有利的规律,或规避风险,或发现商业价值。而大数据分析的基础是学好编程语言。 文章目录 一、安装numpy包二、add函数定义三、add函数实例1 简单数组相加2 广播不同形状的数组3 使用out参数指定输出数组4 两个…

满二叉树你需要了解一下

满二叉树介绍 满二叉树&#xff08;Full Binary Tree&#xff09;是一种特殊的二叉树&#xff0c;其中每个节点都有两个子节点或没有子节点。换句话说&#xff0c;满二叉树的每个层级都是完全填满的。这种树结构具有一定的平衡性&#xff0c;其深度和节点数量之间存在明确的关…

python内容榜第三名

这是家常帖。 最近沉迷整理知识&#xff0c;和大家一起共同学习&#xff0c;共同进步。 越来越爱写博客被大家阅读认可的感觉了。我辛苦学习总结来的成果被大家喜爱。 今天荣登python领域内容榜 榜三&#xff0c;给了我很大的信心去坚持做这件事&#xff0c;知识传播&#xf…

基于JavaWeb的智慧停车管理系统设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题&#xff0c;今天给大家介绍…

玩转系统|长亭雷池WAF详细使用教程——深入了解

目录 配置防护站点 界面操作​ 如何配置域名、端口、上游服务器​ 工作原理​ 在单独设备上部署雷池&#xff08;推荐&#xff09;​ 直接在网站服务器上部署雷池​ 和其他反代设备一起部署的情况​ 配置后网站无法访问&#xff0c;如何排查​ 测试防护效果 确认网站…

深度学习动物识别 - 卷积神经网络 机器视觉 图像识别 计算机竞赛

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

imx VPU解码分析4-wrap与hantro的关系

前面已经分析了wrap和hantro&#xff0c;但是二者是如何结合的&#xff0c;wrap是如何封装hantro的&#xff0c;提供了哪些接口&#xff0c;封装了哪些细节还不太清楚&#xff0c;此文来探究下。这里还是只关注解码。 imx VPU解码分析1-wrap-CSDN博客 imx VPU解码分析2-hantr…

HarmonyOS ArkTSTabs组件的使用(六)

Tabs组件的使用 ArkUI开发框架提供了一种页签容器组件Tabs&#xff0c;开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样&#xff0c;不同的页面设计页签不一样&#xff0c;可以把页签设置在底部、顶部或者侧边。 Tabs组件的简单使用 Tabs组件…

mac添加Chrome插件的方法

如果是.crx的插件 更改后缀crx为zip 后续步骤同下文.zip文件 如果是.zip的插件 使用终端进行解压 注意不要用解压工具解压&#xff0c;一定要用终端&#xff0c;命令行解压 // 进入到“插件名.zip”文件的目录下&#xff0c;输入下面命令&#xff1a; unzip 插件名.zip -…

【项目管理】甘特图(2)——甘特图教程

哈喽啊&#xff0c;你好&#xff0c;我是雷工。 通过上节初步认识了甘特图&#xff0c;本节学习如何一步步创建甘特图&#xff0c;以下为学习笔记。 一、样例展示 下边记录创建甘特图的操作步骤&#xff0c;完成的实际效果如下图所示&#xff1a; 实例图的上端展示项目的重要…

mysql 查询

-- 多表查询select * from tb_dept,tb_emp; 内来链接 -- 内连接 -- A 查询员工的姓名 &#xff0c; 及所属的部门名称 &#xff08;隐式内连接实现&#xff09;select tb_emp.name,tb_dept.name from tb_emp,tb_dept where tb_emp.idtb_emp.id;-- 推荐使用select a.name,b.n…

树与二叉树堆:堆

堆的概念&#xff1a; 一般是把数组的数据在逻辑结构上看成一颗完全二叉树&#xff0c;如下图所示。 注意&#xff1a;别将C语言中的堆和数据结构的堆混为一谈&#xff0c;本文所讲的数据结构的堆是一种完全二叉树&#xff0c;而C语言中的堆其实是一种内存区域的划分 堆的分类…

OpenShift 4 - 部署 RHODS 环境,运行 AI/ML 应用(视频)

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在 OpenShift 4.14 RHODS 1.33 的环境中验证 文章目录 RHODS 简介安装 RHODS 环境运行环境说明用 RHODS Operator 安装环境创建 Jupyter Notebook 运行环境 开发调式 AI/ML 应用部署运行 AI/ML 应用视频参…

第十一章 目标检测中的NMS(工具)

精度提升 众所周知&#xff0c;非极大值抑制NMS是目标检测常用的后处理算法&#xff0c;用于剔除冗余检测框&#xff0c;本文将对可以提升精度的各种NMS方法及其变体进行阶段性总结。 总体概要&#xff1a; 对NMS进行分类&#xff0c;大致可分为以下六种&#xff0c;这里是依…

OSG文字-各种文字效果(边框、阴影及颜色倾斜)示例(2)

各种文字效果(边框、阴影及颜色倾斜)示例 各种文字效果(边框、阴影及颜色倾斜)示例的代码如程序清单9-2所示&#xff1a; 1. /* 各种文字效果(边框、阴影及颜色倾斜)示例 */ 2. osg::ref_ptr<osg::Camera> createAllKindText(const string &strDataFolder) 3. {…

火狐挂代理访问问题Software is preventing Firefox from safely connecting to this site

1、报错 Software is preventing Firefox from safely connecting to this site2、解决步骤 火狐浏览器访问http://burp&#xff0c;右上角有下载按钮下载下来证书文件 在 Firefox 中设置证书颁发机构 (CA) 验证