概览：vue使用element组件，需要给时间选择器设置默认值，场景一：默认时间选择器，场景二：时间范围选择器，开始时间和结束时间。
一、默认时间选择器
实现思路：
element组件的v-model绑定的数据变化，则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。
实现代码：
1.1布局：
<div class="search_right">
<div class="echart1_titleBox">时间：</div>
<div class="searchInnerBox">
<el-date-picker
v-model="data.crewOverViewTime"
type="date" value-format="YYYY-MM-DD"
placeholder="请选择"
clearable
:default-value="new Date()"
@change="handleChangeTime"
/>
</div>
</div>1.2逻辑：
/**
* 默认选中当前时间
*/
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {
// 获取当前月份
let nowMonth = date.getMonth() + 1;
// 获取当前是几号
let strDate = date.getDate();
// 添加分隔符“-”
let seperator = "-";
// 对月份进行处理，1-9月在前面添加一个“0”
if (nowMonth >= 1 && nowMonth <= 9) {
nowMonth = "0" + nowMonth;
}
// 对月份进行处理，1-9号在前面添加一个“0”
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
return nowDate;
};1.3效果展示
二、时间范围选择器
实现思路：
element组件的v-model绑定数据，在组件挂载的生命周期onMounted()进行赋值。注意：时间范围选择器的v-modle绑定的动态数据data是一个数组，数组索引=0是开始时间，数组索引=1是结束时间。
实现代码：
1.1页面：
<div class="searchTimerBox">
<div class="searchTimerBox_titleBox">时间：</div>
<div class="searchInnerBox">
<el-date-picker
v-model="data.valueTwoTimer"
type="monthrange"
value-format="YYYY-MM"
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
:unlink-panels="true"
@change="handleChangeTime"
/>
</div>
</div>1.2逻辑：
/**
* 默认选中此月往前推的12个月
*/
const getTimerPiker = () => {
let newData = new Date()
let seperator = "-";
let nowMonth = newData.getMonth() + 1
if (nowMonth >= 1 && nowMonth <= 9) {
nowMonth = "0" + nowMonth;
}
nowMonth = newData.getFullYear() + seperator + nowMonth;
const beforeMonth = minDate(newData, 11)
data.valueTwoTimer.push(beforeMonth)
data.valueTwoTimer.push(nowMonth)
}
//获取当前日期的 前n个月
const minDate = (_nowDate,_latestMonth) => {
_nowDate.setMonth(_nowDate.getMonth() - _latestMonth)
let year = _nowDate.getFullYear();
let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');
let time = year + '-' + month
return time
};1.3效果展示
