动态考勤表-日期只能在某个月选时间段

整个例子

<template>
  <div class="page-container">
    <div class="toolbar">
      <el-form :inline="true">
        <el-form-item label="考勤日期:">
          <el-date-picker @change="getTimes" v-model="date" size="small" type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="人员姓名:">
          <el-input placeholder="请选择人员" v-model="peoples" readonly size="small" style="padding-top: 4px;">
            <el-button slot="append" @click="dialogVisible = true">选择</el-button>
          </el-input>
        </el-form-item>
        <!-- 组织元素按钮 -->
        <el-form-item>
          <kt-button icon="el-icon-setting" label="选择组织" perms="oASystem:attendanceManagement:monthlyEmployee:selectDept"
            @click="deptTree_visible = true" />
        </el-form-item>
        <dept-tree v-if="deptTree_visible" @close="deptTree_visible = false" @retureDeptFun="handleDeptChange"
          :activeDept="deptList" />
        <el-form-item>
          <el-tooltip class="item" effect="dark" :content="sourceDept  ? sourceDept : '未选择'" placement="top">
            <p class="choseTip">已选 <span style="color: red;">{
   {
   deptList.length}}</span> 个部门</p>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <kt-button perms="oASystem:attendanceManagement:monthlyEmployee:search" type="primary" label="查询" @click="findHandle"
            icon="fa fa-search"></kt-button>
          <kt-button perms="oASystem:attendanceManagement:monthlyEmployee:search" type="primary" label="重置" @click="resetForm"
            icon="el-icon-refresh-left"></kt-button>
          <kt-button label="导出" perms="oASystem:attendanceManagement:monthlyEmployee:printOut" type="primary" @click="setExport2Excel"
            icon="el-icon-printer" />
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table class="mytable" ref="listTable" v-loading="loading" border :data="result ? result.list : []" style="width: 100%;"
        height="100%" :header-cell-style="{background:'#f4f6f8',color:'#909399',textAlign: 'center'}"
        highlight-current-row :cell-style="{ textAlign: 'center' }">
        <el-table-column label="6月份考勤汇总表">
          <el-table-column prop="name" label="员工姓名" min-width="100" fixed="left"></el-table-column>
          <el-table-column prop="employeeID" label="工号" min-width="100"></el-table-column>
          <el-table-column prop="dept" label="部门" min-width="130"></el-table-column>
          <el-table-column prop="names" label="职位" min-width="130"></el-table-column>
          <el-table-column prop="paidForDay" label="出勤天数" min-width="80"></el-table-column>
          <el-table-column prop="workDay" label="休息天数" min-width="80"></el-table-column>
          <el-table-column prop="holidayWorkDay" label="迟到次数" min-width="80"></el-table-column>
          <el-table-column prop="holidayWithPayDay" label="迟到分钟" min-width="80"></el-table-column>
          <el-table-column prop="shouldBeAttendanceDay" label="早退次数" min-width="80"></el-table-column>
          <el-table-column prop="errandDay" label="早退分钟" min-width="80"></el-table-column>
          <el-table-column prop="lateCount" label="旷工天数" min-width="80"></el-table-column>
          <el-table-column prop="leaveEarlyCount" label="缺卡次数" min-width="80"></el-table-column>
          <el-table-column prop="absenteeismDay" label="出差(小时)" min-width="100"></el-table-column>
          <el-table-column prop="sickLeaveDay" label="外出(小时)" min-width="100"></el-table-column>
          <el-table-column label="请假">
            <el-table-column prop="affairLeaveDay" label="事假(天)" min-width="80"></el-table-column>
            <el-table-column prop="annualLeaveDay" label="法定假(天)" min-width="100"></el-table-column>
            <el-table-column prop="takeWorkOffDay" label="调休(天)" min-width="80"></el-table-column>
            <el-table-column prop="vacationDay" label="休假(天)" min-width="80"></el-table-column>
          </el-table-column>
          <el-table-column  label="考勤结果">
                  <el-table-column v-for="(item, index) in transfer" :key="index"  :label="item.week == '六' ? item.week:item.week == '日' ? item.week : item.day"
               min-width="100">
                          <template slot-scope="scope">
                                      <span :style="{'color':changeColor(scope.row.daySisuation[item.day-1])}">{
   {
   scope.row.daySisuation[item.day-1]}}</span>
                              </template>
                  </el-table-column>