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>
相关推荐
asfdsfgas11 分钟前
Angular CDK 响应式工具实操指南:自适应布局构建技巧
javascript·ecmascript·angular.js
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
性野喜悲1 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
敲敲了个代码2 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate2 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫2 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪3 小时前
Vue3 响应式来!
前端·javascript·vue.js
Dontla3 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
lumi.3 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
炫饭第一名3 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试