element-ui实现动态编辑日历

日历点击动态添加事件，获取当前日期，加入一个数组中，想要显示时遍历该数组

   <el-calendar class="calender-style">
              <template slot="dateCell" slot-scope="{ date, data }">
               <!-- 根据日期动态赋予类名，本来想用函数，发现不支持，使用三元嵌套，选中时判断是否是休息或上班，都无赋选中类名；若该日期未选中判断是否是休息或上班；以上都不是则赋空类名 -->              
                 <div
                  :class="
                    data.isSelected == true
                      ? restShow(data.day) == true
                        ? 'rest-selected'
                        : workShow(data.day) == true
                        ? 'work-selected'
                        : 'is-selected'
                      : restShow(data.day) == true
                      ? 'rest-selected'
                      : workShow(data.day) == true
                      ? 'work-selected'
                      : ''
                  "
                  @click="viewDayWork(date, data)"
                >
                  <div class="rest" v-if="restShow(data.day)">休</div>
                  <div class="work" v-if="workShow(data.day)">班</div>
                  {{ data.day.split("-").slice(2).join("-") }}
                </div>
              </template>
            </el-calendar>
<!--scrpit区域 -->
 viewDayWork(date, data) {
      data.isSelected = true;
      // this.dataFlag = true;
      this.dayData = data.day;
      console.log(data);
      // console.log();
    },

    //休息显示
    restShow(day) {
      for (let i = 0; i < this.restList.length; i++) {
        if (this.restList[i] == day) {
          return true;
        }
      }
    },
    //工作显示
    workShow(day) {
      for (let i = 0; i < this.workList.length; i++) {
        if (this.workList[i] == day) {
          return true;
        }
      }
    },
    //显示
    dayShow(data) {
      //遍历休息和上班数组，是否已标记
      if (restShow(data.day) == true) {
        return "rest-selected";
      } else if (workShow(data.day) == true) {
        return "work-selected";
      } else return "";
    },
    //清除
    clearData() {
      this.restList = [];
      this.workList = [];
    },
    //休息添加
    addRest() {
      this.restList.push(this.dayData);
      for (let i = 0; i < this.workList.length; i++) {
        if (this.workList[i] == this.dayData) {
          this.workList.splice(i, 1);
        }
      }
      console.log(this.restList);
    },
    //上班添加
    addWork() {
      this.workList.push(this.dayData);
      for (let i = 0; i < this.restList.length; i++) {
        if (this.restList[i] == this.dayData) {
          this.restList.splice(i, 1);
        }
      }
      console.log(this.workList);
    },
<!-- style-->
.is-selected {
    width: 100%;
    height: 100%;
    /* display: flex; */
    line-height: 24px;
    border: 1px solid #ff6600;
}

.rest-selected {
    color: white;
    height: 97%;
    width: 99%;
    box-sizing: border-box;
    line-height: 23px;
    margin-top: 1px;
    text-align: left;
    padding-right: 14px !important;
    background-color: #67b3ff;
}

.work-selected {
    color: white;
    height: 99%;
    width: 99%;
    margin-top: 1px;
    padding-right: 14px !important;
    box-sizing: border-box;
    line-height: 23px;
    display: flex;
    text-align: center;
    background-color: #00cc00;
    /* top: -10px; */
}

效果图