element 选择日期范围 使用

<div class="flex">
   <span class="label mr15">达成时间:</span>
   <el-date-picker v-model="timeRange"
     size="small" 
     class="mr15" 
     type="daterange" 
     :editable="false" 
     :picker-options="pickerOptions" 
     range-separator="—" 
     start-placeholder="开始日期" 
     end-placeholder="结束日期" 
     align="right"> 
   </el-date-picker>
</div>

 data() {
        return {
            //搜索条件
            timeRange: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()],
        }
},
computed: {
        pickerOptions() {
            //时间段设置
            return this.$store.state.b.pickerOptions
        }
    },
 methods: {

        //查询条件--提交到后台
        searchCondition() {
            let [t1, t2] = [this.timeRange[0], this.timeRange[1]]
            let search = {
                start_date: this.transmitDay(t1),
                end_date: this.transmitDay(t2),
                page: this.currentPage, //第几页
                page_num: this.pageSize, //每页多少条
                type:this.type
            }
            return search
        },

    //点击确定搜索
        refreshTableData() {
            this.currentPage = 1
            this.getList(this.searchCondition())
        },
  //刷新表格数据
        getList(search) {
            this.isloading = true
            console.log(search);
            Statisticallyvalidinformation(search).then(response => {
                console.log(response);
                this.tableData = response.data.data
                this.total = response.data.pages.count
                this.isloading = false
            })
        },
}

sorte.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//ops:通用滚动条样式-pickoptions:时间选择器样式
const moduleB = {
  state: {
    pickerOptions: {
      disabledDate: (time) => {
        return time.getTime() > new Date().getTime()
      },
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
  }
}

export default new Vuex.Store({
  modules: {
    b: moduleB,
  }
})