需求:数据量太大时,初始进入页面 默认展示两周或一个月数据
1.默认进去初始当前月
<template><a-form-item label="添加时间"><a-range-picker :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" /></a-form-item></template>created() {this.getInitializeDate();//获取当月默认日期(当月1号到当天)},method:{getInitializeDate() {let date = new Date()//获取新的时间//获取当前年份,并且转为字符串let year = date.getFullYear().toString()//获取当前月份,因为月份是要从0开始,此处要加1,//使用三元表达式,判断是否小于10,如果是的话,就在字符串前面拼接'0'let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()//获取天,判断是否小于10,如果是的话,就在在字符串前面拼接'0'let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()//字符串拼接,将开始时间和结束时间进行拼接let start = year + '-' + month + '-01' //当月第一天let end = year + '-' + month + '-' + day //当天this.createValue = [start, end] //将值设置给组件DatePicker 绑定的数据},}
2.默认进去显示14天 比较简单 多少天 下方代码数字填多少就可以了
<a-col :md="8" :sm="24"><a-range-picker style="width:100%;" :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" /></a-col>import dayjs from 'dayjs';created() {//是要传给后端的值 进行了日期格式化this.queryParam.opSTime = dayjs(moment().startOf('day').subtract(14, 'd')).format('YYYY-MM-DD');this.queryParam.opETime = dayjs(moment().endOf('day')).format('YYYY-MM-DD');//列表接口请求this.loadList(1);//日期选择器页面显示的值 this.createValue = [moment().startOf('day').subtract(14, 'd'), moment().endOf('day')]},