看代码
<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>