element日历组件---值班计划（动态数据渲染及头部样式）

• 根据element组件封装后的日历组件如下图所示，根据后台数据渲染值班计划和双击日期对该日期排班。
  
• 首先是改造头部，由于element日历组件并不满足所需功能，将element源码进行改造封装。代码如下

<!-- 这是改造后的代码 -->
<div class="el-calendar__header">
      <span class="last" @click="selectDate('prev-month')"
        ><i class="el-icon-arrow-left"></i
      ></span>
      <div class="el-calendar__title">
        {{ i18nDate }}
      </div>
      <span class="next" @click="selectDate('next-month')"
        ><i class="el-icon-arrow-right"></i
      ></span>
</div>
<!-- 源码-->
<div class="el-calendar__header">
      <div class="el-calendar__title">
        {{ i18nDate }}
      </div>
      <div
        class="el-calendar__button-group"
        v-if="validatedRange.length === 0">
        <el-button-group>
          <el-button
            type="plain"
            size="mini"
            @click="selectDate('prev-month')">
            {{ t('el.datepicker.prevMonth') }}
          </el-button>
          <el-button
            type="plain"
            size="mini"
            @click="selectDate('today')">
            {{ t('el.datepicker.today') }}
          </el-button>
          <el-button
            type="plain"
            size="mini"
            @click="selectDate('next-month')">
            {{ t('el.datepicker.nextMonth') }}
          </el-button>
        </el-button-group>
      </div>
  </div>

• 添加双击事件，在element日历组件是将每个日期封装在了table表格中，单击表格可以自定事件，在这个需求中是要双击后对日期排班。

<date-table
      v-for="(range, index) in validatedRange"
      :key="index"
      :date="range[0]"
      :selected-day="realSelectedDay"
      :range="range"
      :hide-header="index !== 0"
      :first-day-of-week="realFirstDayOfWeek"
      @pick="pickDay"
      @dbClick="dbClick"/
    />
//自己用骚操作搞得双击
  dbClick(day) {
    this.$emit("dbClick", day);
  },//自己用骚操作搞得双击
  dbClick(day) {
    this.$emit("dbClick", day);
  },