SOURCE

var Main = {
    data() {
    let that = this
    return {
      time:"",
      timeType:"day",
      pickerOptions: {
        shortcuts: [{
          text: '按日期',
          onClick(picker) {
            that.time = ""
            that.timeType = "day"
            that.$refs.month&&that.$refs.month.handleClose();
            that.$nextTick(() => {
              that.$refs.date.focus();
              that.$nextTick(() => {
                let dom = document.getElementsByClassName('el-picker-panel__shortcut')
                dom[0] ? dom[0].style.color = "#409EFF" : ""
                dom[1] ? dom[1].style.color = "#606266" : ""
                dom[2] ? dom[2].style.color = "#606266" : ""
              })
            })
          }
        }, {
          text: '按月份',
          onClick(picker) {
            that.time = ""
            that.timeType = "month"
            that.$refs.date&&that.$refs.date.handleClose();
            that.$nextTick(() => {
              that.$refs.month.focus();
              that.$nextTick(() => {
                let dom = document.getElementsByClassName('el-picker-panel__shortcut')
                dom[0] ? dom[0].style.color = "#606266" : ""
                dom[1] ? dom[1].style.color = "#409eff" : ""
                dom[2] ? dom[2].style.color = "#606266" : ""
              })
            })
          }
        }, {
          text: '按年份',
          onClick(picker) {
            that.time = ""
            that.timeType = "yearData"
            that.$refs.date&&that.$refs.date.handleClose();
            that.$refs.month&&that.$refs.month.handleClose();
            that.$nextTick(() => {
              that.$refs.yearData.focus();
              that.$nextTick(() => {
                let dom = document.getElementsByClassName('el-picker-panel__shortcut')
                dom[0] ? dom[0].style.color = "#606266" : ""
                dom[1] ? dom[1].style.color = "#606266" : ""
                dom[2] ? dom[2].style.color = "#409eff" : ""
              })
            })
          }
        }]
      },
    };
  },
  methods: {
  	//默认选中天
    focus() {
      this.$nextTick(() => {
        document.getElementsByClassName('el-picker-panel__shortcut')[0].style.color = "#409EFF"
      })
    }
  }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<div id="app">
<template>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      key="date" 
      ref="date" 
      size="mini" 
      v-model="time" 
      @focus="focus" 
      v-if="timeType=='day'" 
      type="date"
      placeholder="选择日期" 
      :picker-options="pickerOptions" 
      value-format="yyyy-MM-dd"
      >
    </el-date-picker>
    <el-date-picker 
      key="month" 
      ref="month" 
      size="mini" 
      v-model="time" 
      v-if="timeType=='month'" 
      type="month"
      placeholder="选择月份"
      :picker-options="pickerOptions"
      value-format="yyyy-MM">
    </el-date-picker>
    <el-date-picker 
      key="yearData" 
      ref="yearData" 
      size="mini" 
      v-model="time" 
      v-if="timeType=='yearData'" 
      type="year"
      placeholder="选择年份"
      :picker-options="pickerOptions"
      value-format="yyyy">
    </el-date-picker>
  </div>
</template>
</div>