通过下拉列表里面的选项: 今日、本周、本月、本季度、本年，控制时间选择器，显示开始日期和结束日期

html代码

<el-select v-model="valueTime" placeholder="请选择" @change="timeChange">
          <el-option
            v-for="item in optionsTime"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       	</el-select>
        <el-date-picker
                    v-model="currentTime"
                    type="daterange"
                    style="width: 260px"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small">
            </el-date-picker>

vue里面的参数声明

data() {
            return {
              currentTime: '',
              valueTime: '',
              optionsTime: [{
                value: '选项1',
                label: '今日'
              }, {
                value: '选项2',
                label: '本周'
              }, {
                value: '选项3',
                label: '本月'
              }, {
                value: '选项4',
                label: '本季度'
              }, {
                value: '选项5',
                label: '本年'
              }],
            };
          },

vue声明里面的方法:

// timeChange是下拉选中值发生变化时触发
timeChange(data) {;
              // 这里的Utils.formatTime是封装好的时间戳转成标准时间的格式, Utils是文件名，Utils.getTime()获取的是当前时间的时间戳
              let nowTime = Utils.formatTime(Utils.getTime(), 'yyyy-MM-dd')
              let nowTime2 = Utils.formatTime(Utils.getTime(), 'yyyy-MM')
              let nowTimeArr = nowTime.split('-')
               // 获取当月有多少天
              let monthDayNum = this.getDuration(nowTime2)
               if (data === '选项1') {  // 今日
                this.currentTime = [nowTime, nowTime]
              } else if (data === '选项2') { // 本周
                this.currentTime = []
                this.currentTime.push(Utils.formatTime(beginOfWeek(nowTime), 'yyyy-MM-dd'));
                this.currentTime.push(Utils.formatTime(endOfWeek(nowTime), 'yyyy-MM-dd'));
              } else if (data === '选项3') { // 本月
                this.currentTime = []
                let _monthTimeOne = nowTimeArr[0] + '-' + nowTimeArr[1] + '-' + '01'
                let _monthTimeTwo = nowTimeArr[0] + '-' + nowTimeArr[1] + '-' + monthDayNum
                this.currentTime.push(_monthTimeOne);
                this.currentTime.push(_monthTimeTwo);
              } else if (data === '选项4') { // 本季度
                this.currentTime = []
                let quarterTimeOne = ''
                let quarterTimeTwo = ''
                if (Number(nowTimeArr[1]) < 4) {
                  let _time = this.getNowQuarter(nowTimeArr[0], '01', '03')
                  this.currentTime.push(_time.startTime);
                  this.currentTime.push(_time.endTime);
                } else if (Number(nowTimeArr[1]) < 7 && Number(nowTimeArr[1]) > 3) {
                  let _time = this.getNowQuarter(nowTimeArr[0], '04', '06')
                  this.currentTime.push(_time.startTime);
                  this.currentTime.push(_time.endTime);
                } else if (Number(nowTimeArr[1]) < 10 && Number(nowTimeArr[1]) > 6) {
                  let _time = this.getNowQuarter(nowTimeArr[0], '07', '09')
                  this.currentTime.push(_time.startTime);
                  this.currentTime.push(_time.endTime);
                } else {
                  let _time = this.getNowQuarter(nowTimeArr[0], '10', '12')
                  this.currentTime.push(_time.startTime);
                  this.currentTime.push(_time.endTime);
                }
              } else if (data === '选项5') { // 本年
                  this.currentTime = []
                  let _time = this.getNowQuarter(nowTimeArr[0], '01', '12')
                  this.currentTime.push(_time.startTime);
                  this.currentTime.push(_time.endTime);
              }
              // }
            },
            // 获取当前月份有多少天
            getDuration (date) {
              let dt = new Date(date); // 获取中国标准时间
               // 获取当前月份,比如0为1月，以此类推
              var month = dt.getMonth();
               // 设置月份 表示一个月中的一天的一个数值（1 ~ 31）, 得到的是时间戳, 0 为上一个月的最后一天, -1 为上一个月最后一天之前的一天, 
              dt.setMonth(dt.getMonth() + 1);
               // 设置一个月的某一天 得到的也是时间戳, 0 为上一个月的最后一天, -1 为上一个月最后一天之前的一天 
              dt.setDate(0);
              return dt.getDate()  
            },
            // 本季度和本年
            getNowQuarter(year, startMon, endMon) {
                let quarterTimeOne = year + '-' + startMon + '-' + '01'
                let totalDay = this.getDuration(year + '-' + endMon)
                let quarterTimeTwo = year + '-' + endMon + '-' + totalDay
                return {startTime: quarterTimeOne, endTime: quarterTimeTwo}
            }

vue声明之外的本周开始和结束的函数

      //获取日期周开始日期（周一为每周的开始,周日为每周的结束）
	function beginOfWeek(dateValue) {
		let date;
    console.log('dateValue instanceof Date:', dateValue instanceof Date);
		if (dateValue instanceof Date) {
			date = dateValue;
		} else {
			date = new Date(dateValue);
		}
		let subDay = 0;
		let weekDay = date.getDay(); // 返回一周某一天的数字
		if (weekDay == 0) {
			//周天
			subDay = 6;
		} else {
			subDay = weekDay - 1;
		}
    // 86400000(时间戳)：1天的时间=24小时 x 60分钟 x 60秒 x 1000毫秒 单位是L
		let beginDateTime = date.getTime() - (86400000 * subDay);
		return new Date(beginDateTime);
	}
	//获取日期周结束日期（周一为每周的开始，周日为每周的结束）
	function endOfWeek(dateValue) {
		let date;
		if (dateValue instanceof Date) {
			date = dateValue;
		} else {
			date = new Date(dateValue);
		}
		let weekDay = date.getDay();
		if (weekDay == 0) {
			//周天
			return date;
		} else {
			let addDay = 7 - weekDay;
			let endDateTime = date.getTime() + (86400000 * addDay);
			return new Date(endDateTime);
		}
	}

Utils.js文件里面对时间的函数封装：

/**
 * 将时间戳转换成标准时间格式
 * @param time [int、DATE] 待格式化的时间戳或DATE对象【选填，默认当前时间戳】
 * @param format [string] 标准时间的格式【选填，默认'yyyy-MM-dd hh:mm:ss'】
 * */
Utils.formatTime = (function () {
    var _format = 'yyyy-MM-dd hh:mm:ss';
    var newDate = new Date();
    var date;
    var setData = function () {
        date = {
            'M+': newDate.getMonth() + 1,
            'd+': newDate.getDate(),
            'h+': newDate.getHours(),
            'm+': newDate.getMinutes(),
            's+': newDate.getSeconds(),
            'q+': Math.floor((newDate.getMonth() + 3) / 3),
            'S+': newDate.getMilliseconds()
        }
    };
    var Timestamp = function (time) {
        time || (time = Utils.getTime());
        if (Utils.isDate(time)) { // 如果传入time为DATE对象则直接复制，并return掉
            newDate = time; return;
        }
        if (Utils.size(time.toString()) === 10) { // 转成高精度时间戳
            time = time * 1000;
        }
        newDate.setTime(time);
    };
    return function (time, format) {
        Timestamp(time); // 标准化时间戳
        format || (format = _format);
        setData(); // 设置当前时间
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp('(' + k + ')').test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                    ? date[k] : ('00' + date[k]).substr(('' + date[k]).length));
            }
        }
        return format;
    }
})();
/**
* 将字符串转换成时间戳
* @param stringTime [string] 字符串时间格式；如 '2017-01-01 01:02:03'
* @return 时间戳
* */
Utils.formatStringTime = function (stringTime) {
    stringTime = new Date(Date.parse(stringTime.replace(/-/g, '/')))
    return stringTime.getTime()
}

/**
 * 获得当前时间戳
 * */
Utils.getTime = (Date.now || function () {
    return new Date().getTime()
})