element UI季度选择器的实现

效果展示

用elementUI的select实现季度选择器

代码实现

  1. generateQuarterOption放在methods中,需要近几年的只需要修改第一个循环的次数即可,mounted生命周期函数中调用generateQuarterOption()
javascript 复制代码
    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. 视图代码
javascript 复制代码
        <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>
相关推荐
大怪v6 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵6 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda6 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机7 小时前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu10 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了10 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎10 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端11 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
勤奋菲菲12 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀12 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序