通过下来选择操作时间，获取相应的时间范围，并分装成组件，Element中的DatePicker日期选择器中的快捷方式功能类似

先上效果图

实现这个的目的就是自带的太丑了，也因系统大部分界面都需时间范围查询，突发奇想自己封装一个组件，通过优化和测试后，也得到了项目经理的认可，为此分享一下。

ok，废话不多说上源码

<template>
  <div>
    <div style="display: inline-block;">
     <el-select v-model="selectedOption"  placeholder="时间范围" @change="dateTimeRange" clearable>
      <el-option label="今天" value="today"></el-option>
      <el-option label="昨天" value="yesterday"></el-option>
      <el-option label="近一周" value="lastWeek"></el-option>
      <el-option label="本月" value="thisMonth"></el-option>
      <el-option label="上月" value="lastMonths"></el-option>
      <el-option label="近一月" value="lastMonth"></el-option>
      <el-option label="近三月" value="lastThreeMonths"></el-option>
    </el-select>
  </div>
  <div style="display: inline-block;padding: 0 4px;" >
        <el-date-picker clearable style="margin-left: 5px"
                        :default-time="['00:00:00', '23:59:59']"
                        v-model="value1"
                        type="datetimerange"
                        @change="changeDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期时间"
                        end-placeholder="结束日期时间"
                        :default-value="getDefaultDateRange()"
        >
        </el-date-picker>
    </div>
    </div>
</template>

<script>
import moment from "moment";
export default {
  props: [ 'createTimeStart', 'createTimeEnd'],
  data() {
    return {
      selectedOption: '',
      value1: [],
      form: {
        createTimeStart: '',
        createTimeEnd: ''
      }
    }
  },
  methods: {
    //选择操作时间
    changeDate(e){
      var self = this
      if(e){
        self.form.createTimeStart = e[0];
        self.form.createTimeEnd = e[1];
      }else{
        delete self.form.createTimeStart;
        delete self.form.createTimeEnd;
      }
    },

    getDefaultDateRange() {
      return [new Date(), new Date()];
    },


    dateTimeRange() {
      var self = this
      switch (this.selectedOption) {
        //当天00点到当前时间
        case "today":
          const today =new Date();
          const todayEnd =new Date();
          today.setHours(0,0,0,0);
          this.value1 = [  today.Format('yyyy-MM-dd hh:mm:ss'),todayEnd.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
        //  昨天00点到23点59分59秒
        case "yesterday":
          const yesterday = new Date();
          const yesterdayEnd =new Date();
          yesterday.setHours(0,0,0);
          yesterdayEnd.setHours(23,59,59);
          yesterday.setDate(yesterday.getDate() - 1);
          yesterdayEnd.setDate(yesterdayEnd.getDate() -1 );
          this.value1 = [yesterday.Format('yyyy-MM-dd hh:mm:ss'), yesterdayEnd.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
        //  前七天00点到当前时间
        case "lastWeek":
          const today1 = new Date();
          const lastWeek = new Date(today1.getFullYear(), today1.getMonth(), today1.getDate() - 7);
          this.value1 = [lastWeek.Format('yyyy-MM-dd hh:mm:ss'), today1.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
          //  前七30天00点到当前时间
        case "lastMonth":
          const today2 = new Date();
          const lastMonth = new Date(today2.getFullYear(), today2.getMonth() - 1, today2.getDate());
          this.value1 = [lastMonth.Format('yyyy-MM-dd hh:mm:ss'), today2.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
          //  前七90天00点到当前时间
        case "lastThreeMonths":
          const today3 = new Date();
          const lastThreeMonths = new Date(today3.getFullYear(), today3.getMonth() - 3, today3.getDate());
          this.value1 = [lastThreeMonths.Format('yyyy-MM-dd hh:mm:ss'), today3.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
          //本月
        case "thisMonth":
          const today4 =new Date();
          const thisMonth = new Date(today4.getFullYear(), today4.getMonth(),);
          this.value1 = [thisMonth.Format('yyyy-MM-dd hh:mm:ss'), today4.Format('yyyy-MM-dd hh:mm:ss')];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
          //上月
        case "lastMonths":
          const today5 =new Date();
          const lastMonths = new Date(today5.getFullYear(), today5.getMonth()-1,);
          let endTime = moment(today5).month(today5.getMonth() - 1).date(1).endOf("month")
              .format("YYYY-MM-DD HH:mm:ss");
          this.value1 = [lastMonths.Format('yyyy-MM-dd hh:mm:ss'), endTime];
          self.form.createTimeStart =  this.value1[0];
          self.form.createTimeEnd = this.value1[1];
          break;
        default:
          this.value1 = [];
          delete self.form.createTimeStart;
          delete self.form.createTimeEnd;
      }
    },
  }
}
</script>
<style scoped>
.se-opt > span{
  width: 83px;
  line-height: 28px;
  text-align: right;
  font-size: 12px;
  color: #666;
  float: left;
}
</style>

调用方法可以用el-form-time的行内表单

<el-form-item label="操作时间">
  <date-time-range ref='dateTimeRange'></date-time-range>
</el-form-item>

import dateTimeRange from "@components/dateTimeRange";


//获取数据
    getData() {
      var self = this;
      if (this.$refs.dateTimeRange.value1 != null) {
        self.form.createTimeStart = this.$refs.dateTimeRange.value1[0];
        self.form.createTimeEnd = this.$refs.dateTimeRange.value1[1];
      } else {
        self.form.createTimeStart = this.$refs.dateTimeRange.createTimeStart
        self.form.createTimeEnd = this.$refs.dateTimeRange.createTimeEnd
      }
      self.UTILS.axiosRequest('get', self.PATHS.warningPath + '/operateLog/page', self.form, function (res) {
        if (res.code == '0000') {
          self.tableData = res.data.records;
          if (self.form.pageNum == 1) {
            self.dataCount = res.data.total;
          }
          //
        } else {
          self.$message({
            message: res.message,
            type: 'warning'
          });
        }
      }, 1);
    },

有需要的各位请直接拿走