vue年季度月联动筛选（el-cascader实现）

 

 默认显示当年当季当月

  <label class="font-weight">时间范围</label>&nbsp;&nbsp;

                 <el-cascader
              placeholder="请选择"
              :options="timeOption"
              filterable
              clearable
              change-on-select
              v-model="timeRange"
              :props="{

                emitPath: true
              }"
               @change="getPage()"
            ></el-cascader>

 

 timeRange:'',//默认当年当季当月
      timeOption:[{
          value: '2023年',
          label: '2023年',
          children: [{
            value: '第一季度',
            label: '第一季度',
             children: [{
            value: '1月',
            label: '1月'
          },{
            value: '2月',
            label: '2月'
          },{
            value: '3月',
            label: '3月'
          }]
          }, {
            value: '第二季度',
            label: '第二季度',
             children: [{
            value: '4月',
            label: '4月'
          },{
            value: '5月',
            label: '5月'
          },{
            value: '6月',
            label: '6月'
          }]
          },  {
            value: '第三季度',
            label: '第三季度',
             children: [{
            value: '7月',
            label: '7月'
          },{
            value: '8月',
            label: '8月'
          },{
            value: '9月',
            label: '9月'
          }]
          }, {
            value: '第四季度',
            label: '第四季度',
             children: [{
            value: '10月',
            label: '10月'
          },{
            value: '11月',
            label: '11月'
          },{
            value: '12月',
            label: '12月'
          }]
          }]
        }],

  created(){
this.getNowTimeRange();
  },

      getNowTimeRange() {
        //获取当前年
const year=new Date().getFullYear()+'年';
// 获取当前季度：
      var currMonth = new Date().getMonth() + 1;
      var currQuarter = Math.floor(
        currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
      );
      const info = {
        1: "第一季度",
        2: "第二季度",
        3: "第三季度",
        4: "第四季度"
      };
      const quarter = info[currQuarter];

      //获取当前月
      const monthNum =new Date().getMonth() + 1;
      const nowMonth= monthNum+'月';
      this.timeRange=[year,quarter,nowMonth];

      console.log("%c Line:528 🍿", "color:#3f7cff",this.timeRange);
    },