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>
相关推荐
Mintopia6 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖10 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia16 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
MrSkye24 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子32 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥1 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu2 小时前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的9 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络10 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码