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>
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce8 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop10 小时前
05-ES6
前端·javascript·es6
Heo10 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端