vue 时间维度（日，月，年）的切换

看代码

<template>
	//样式自己写
	<div class="aaa">
                <div>
                  <el-form
                    ref="form"
                    :model="form"
                    label-width="90px"
                    class="content_l_form"
                  >
                  	//主要看这里 的 changeDateType 方法
                    <el-form-item label="选择维度：">
                      <el-select
                        v-model="form.dateType"
                        placeholder=""
                        style="width: 60px"
                        @change="changeDateType"
                      >
                        <el-option label="日" value="day"></el-option>
                        <el-option label="月" value="month"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="时间选择：">
                      <el-col :span="11">
                        <el-date-picker
                          style="width: 100%"
                          v-model="form.beginTime"
                          :type="form.dateType == 'day' ? 'date' : 'month'"
                          :value-format="valueFormat"
                          :picker-options="pickerOptionsStart"
                          placeholder="选择日期"
                          @mouseout="falgLeft"
                        >
                        </el-date-picker>
                      </el-col>
                      <el-col :span="1" style="text-align:center;">
                        <span> - </span>
                      </el-col>

                      <el-col :span="11">
                        <el-date-picker
                          style="width: 100%"
                          v-model="form.endTime"
                          :type="form.dateType == 'day' ? 'date' : 'month'"
                          :value-format="valueFormat"
                          :picker-options="pickerOptionsEnd"
                          placeholder="选择日期"
                          @mouseout="falgLeft"
                        >
                        </el-date-picker>
                      </el-col>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="content_r">
                  <el-button
                    type="success"
                    @click="getList(value)"
                    icon="el-icon-search"
                    :disabled="flag"
                    >查询</el-button
                  >
                  <el-button
                    type="warning"
                    icon="el-icon-refresh-right"
                    @click="repla"
                    >重置</el-button
                  >
                </div>
              </div>
</template>
<script>
	// 时间格式转换
	import { parseTime } from "@/filters/index.js";
	export default {
	  name: "PhotovoltaicManagement",
	  components: { EchartCom, leftTree },
	  data() {
	    return {
	    	// 时间格式
	      	valueFormat: "yyyy-MM-dd",
	      	// 搜索条件
	      	form: {
		        beginTime: parseTime(new Date().getTime() - 9*24*3600*1000).substring(0, 10), //开始时间
		        endTime: parseTime(new Date()).substring(0, 10), //结束时间
		        dateType: "day", //时间维度
	      	},
	    }
	},
	methods: {
		// 时间格式
    changeDateType(val) {
      this.form.dateType = val;
      if (val == "day") {
        this.valueFormat = "yyyy-MM-dd";
        this.form.beginTime = parseTime(new Date().getTime() - 9*24*3600*1000).substring(0, 10)//截取10位等于 年 月 日  
        this.form.endTime = parseTime(new Date()).substring(0, 10)
      } else {
        this.valueFormat = "yyyy-MM";
        this.form.beginTime =
          this.form.beginTime.length == 10
            ? this.form.beginTime.slice(0, 7)//截取 7 位等于 年 月
            : this.form.beginTime;
        this.form.endTime =
          this.form.endTime.length == 10
            ? this.form.endTime.slice(0, 7)// //截取 4 位等于 年  
            : this.form.endTime;
      }
    },
	}
}
</script>