element UI季度选择器的实现

效果展示

用elementUI的select实现季度选择器
请添加图片描述

代码实现

  1. generateQuarterOption放在methods中,需要近几年的只需要修改第一个循环的次数即可,mounted生命周期函数中调用generateQuarterOption()
    generateQuarterOption() {
      //近3年所有季度
      let now = new Date()
      for (let i = 0; i < 3; i++) {
        let year = now.getFullYear() - i
        let quarter = Math.ceil((now.getMonth() + 1) / 3)
        for (let j = 4; j >= 1; j--) {
          //value为四个季度的时间起末,例如2019年1季度的时间起末为2019-01-01 00:00:00至2019-03-31 23:59:59
          let item = {
            label: year + '年-第' + j + '季度',
            value: [formatDate(new Date(year + '-' + (j * 3 - 2) + '-01 00:00:00')), formatDate(new Date(year + '-' + (j * 3) + '-'+(((j * 3)===6||(j * 3)===9)?30:31)+' 23:59:59'))]
          }
          this.quarterOption.push(item)
        }
      }

      console.log(this.quarterOption)
    },
  1. data中需要定义一个quarterOption
  2. 视图代码
        <el-form-item v-if="timeCategory===1" label="季度选择">
          <el-select v-model="topChooseTime" key="quarterSelect">
            <el-option :value="item.value" :label="item.label" v-for="item in quarterOption"></el-option>
          </el-select>
        </el-form-item>

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

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

相关文章

6行代码,1行命令!轻松实现多模态(视觉)模型离线推理 在线服务

早在去年年底&#xff0c;LMDeploy 已经悄悄地支持了多模态&#xff08;视觉&#xff09;模型&#xff08;下文简称 VLM&#xff09;推理&#xff0c;只不过它静静地躺在仓库的 examples/vl 角落里&#xff0c;未曾与大家正式照面。 LMDeploy 开源链接&#xff1a; https://gi…

Android | 开发过程遇到的报错以及解决方法

注&#xff1a; 此博客为记录个人开发过程中遇到的报错问题以及解决方案。 由于不同版本环境等因素影响&#xff0c;解决方案对其他人可能无效。 本博客仅提供一种解决思路&#xff0c;具体问题请具体分析。 报错&#xff1a;Connection timed out: connect解决&#xff1a;在G…

763. 划分字母区间(力扣LeetCode)

763. 划分字母区间 题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串…

pip wheel直接为离线环境打包需要的python包

很多情况下&#xff0c;需要离线安装python库&#xff0c;直接下载所需的库包时&#xff0c;可能又要求更新或安装相关的依赖包&#xff08;这就非常麻烦了&#xff09;&#xff0c;所以推荐一条命令一步到位&#xff0c;命令如下&#xff1a; pip wheel -r requirements.txt …

设计模式-设配器模式

目录 &#x1f38a;1.适配器模式介绍 &#x1f383;2.适配器类型 &#x1f38f;3.接口适配器 &#x1f390;4.类的适配器 &#x1f38e;5.优缺点 1.适配器模式介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。这种类型的设…

什么?想让视频号小店领先同行,竟然这么简单!

大家好&#xff0c;我是电商小布。 视频号小店从推出到现在&#xff0c;逐渐也是被越来越多的人所熟知了。 虽然说当前市场内部的商家数量并不多&#xff0c;竞争力不大。 但是在入驻之后想要领先同行商家&#xff0c;产生更好的店铺数据&#xff0c;该怎么来做呢&#xff1…

学习JavaEE的日子 Day29 yield,join,线程的中断,守护线程,线程局部变量共享,线程生命周期

Day29 多线程 12. 线程的礼让 Thread.yield(); 理解&#xff1a;此方法为静态方法&#xff0c;此方法写在哪个线程中&#xff0c;哪个线程就礼让 注意&#xff1a;所谓的礼让是指当前线程退出CPU资源&#xff0c;并转到就绪状态&#xff0c;接着再抢 需求&#xff1a;创建两个…

多叉树题目:N 叉树的后序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 解法三思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;N 叉树的后序遍历 出处&#xff1a;590. N 叉树的后序遍历 难度 3 级 题目…

Android笔记(三十):PorterDuffXfermode实现旋转进度View

背景 核心原理是使用PorterDuffXfermode Path来绘制进度&#xff0c;并实现圆角 效果图 Android笔记(三十)效果演示 进度条绘制步骤 将ImageView矩形七个点的坐标存储起来&#xff08;configNodes&#xff09; 他们对应着7个不同的刻度&#xff0c;每个刻度的值 i * &#…

Unity | 射线检测及EventSystem总结

目录 一、知识概述 1.Input.mousePosition 2.Camera.ScreenToWorldPoint 3.Camera.ScreenPointToRay 4.Physics2D.Raycast 二、射线相关 1.3D&#xff08;包括UI&#xff09;、射线与ScreenPointToRay 2.3D&#xff08;包括UI&#xff09;、射线与ScreenToWorldPoint …

计算机基础,挑战全网最全解析

1.什么是计算机&#xff1f; 2.冯诺依曼结构 3.进制 4.摩尔斯码和布莱叶盲文 摩尔斯码 布莱叶盲文

如何使用群晖WebDAV实现固定公网地址同步Zotero文献管理器

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

蓝桥杯嵌入式学习笔记(6):IIC程序设计

目录 前言 1. IIC基本原理 2. 电路原理 3. 代码编程 3.1 预备工作 3.2 AT24C02写读功能编写 3.2.1 AT24C02写操作实现 3.2.2 AT24C02读操作实现 3.3 MCP4017写读功能编写 3.3.1 MCP4017写操作实现 3.3.2 MCP4017读操作实现 3.4 main.c编写 3.4.1 头文件引用 3.4.…

基于javaweb(springboot+mybatis)网上酒类商城项目设计和实现以及文档报告

基于javaweb(springbootmybatis)网上酒类商城项目设计和实现以及文档报告 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞…

Redis数据类型介绍和使用

数据类型 String&#xff08;字符串&#xff09;&#xff1a;最基本的数据类型&#xff0c;可以存储任何类型的数据&#xff0c;如文本、数字等。Hash&#xff08;哈希&#xff09;&#xff1a;用于存储字段-值对的散列集合&#xff0c;适用于存储对象。List&#xff08;列表&…

鱼哥赠书活动第14期:看完这本《数字化运维》掌握数字化运维方法,构建数字化运维体系

鱼哥赠书活动第14期&#xff1a;看完这本《数字化运维》掌握数字化运维方法&#xff0c;构建数字化运维体系 主要内容&#xff1a;读者对象&#xff1a;赠书抽奖规则:往期赠书福利&#xff1a; 数字化转型已经成为大势所趋&#xff0c;各行各业正朝着数字化方向转型&#xff0c…

如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问

前言 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问&#xff0c;希望大家能觉得实用&#xff01; 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&am…

【数据结构】链表习题之环形链表的约瑟夫问题

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;道阻且长&#xff0c;行则将至 前言 今天这道题目时牛客上的题目&#xff0c;名为环形链表的约瑟夫问题&#xff0c;很有趣的的一道题目 环形链表的约瑟…

申请免费域名证书

目录 背景&#xff1a; 域名证书是什么&#xff1a; 域名证书有哪些&#xff1a; 部署域名证书有什么用&#xff1a; 免费的域名证书在哪里申请&#xff1a; 背景&#xff1a; 域名是一个IP地址上的“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址(网站&…

OpenHarmony开发知识点记录之ABI

OpenHarmony系统支持丰富的设备形态&#xff0c;支持多种架构指令集&#xff0c;支持多种操作系统内核&#xff1b;为了应用在各种OpenHarmony设备上的兼容性&#xff0c;本文定义了"OHOS" ABI&#xff08;Application Binary Interface&#xff09;的基础标准&#…