el-calendar- calendar-日历修改背景色等css

<style  >
.home .el-calendar__header {
  display: none;
}

.home .scrllCss {
  overflow-x: auto;
}
.home .calendar {
  min-width: 1064px;
  max-width: 1680px;
}

.home .el-calendar-table {
  /* height: 700px; */
}
//展示改为周【周一 周二 周三 周四 周五 周六 周日】
.home .el-calendar-table thead th:before {
  content: "周"; 
}

.home .el-calendar__body {
  padding: 12px 0 20px 0;
}
.home .el-calendar__body tbody .el-calendar-table__row .prev {
  pointer-events: none;
}
.home .el-calendar__body tbody .el-calendar-table__row .prev .dayDay {
  display: none;
}
.home .el-calendar__body tbody .el-calendar-table__row .next {
  pointer-events: none;
}
.home .el-calendar__body tbody .el-calendar-table__row .next .dayDay {
  display: none;
}

.el-calendar-table tr td:first-child {
  border-left: 1px solid #d7d7d7;
}
/* 更换边框颜色 */
.el-calendar-table tr:first-child td {
  border-top: 1px solid #d7d7d7;
}
.el-calendar-table td {
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
}
.home .el-calendar-table td.is-selected {
  background-color: #ffffff;
}

.home .el-calendar-table .el-calendar-day {
  height: 98px;
}
.home .el-calendar-table .el-calendar-day:hover {
  background-color: #d6f4ff;
}

.home .el-calendar-table td.is-nodata {
  background-color: #ffecea;
}
.home .el-calendar-table td.is-today {
  background-color: #d6f4ff !important;
}
.home .el-calendar-table td.is-today .is-nodata {
  background-color: #d6f4ff !important;
}
.home .calendar .el-calendar__title {
  color: red;
}
.home .calendar .el-button-group {
  display: none;
}
.home .el-calendar-table tbody tr:last-child {
  /* //每个月的日历显示五行 */
  display: none !important;
}

.home .el-calendar-table .el-calendar-day {
  padding: 0px;
}
</style>

  // 日历的日期值，01舍弃0返回1 ，其他正常返回
    nowDate(day) {
      let a = day
        .split("-")
        .slice(2)
        .join("")
        .slice(0, 1);
      let b = day
        .split("-")
        .slice(2)
        .join("")
        .slice(1, 2);
      let c = day
        .split("-")
        .slice(2)
        .join("-");

      if (a == 0) {
        return b;
      } else {
        return c;
      }
    },

demo主体代码
 <div class="calendar">
        <el-calendar v-model="calendarValue[0]">
          <template slot="dateCell" slot-scope="{date, data}">
          <div
                      :class="(calendarList[data.day]||{})['has_cost']==0?'is-nodata':''"
              class="dayDay"
              @click="clickRl(data)"
            >
             <el-tooltip
                height="300"
                placement="top"
                :disabled="(((calendarList[data.day]||{})['account_list'])||[]).length==0"
              >
              
              内部弹窗展示值。 点击日历操作部分
              </el-tooltip>
            
            </div>
 </template>
        </el-calendar>
      </div>

列表提交。 多个输入框  3*4的表格 3行。每行4个。 需要校验这12个数据


  //修改时间
    changeTime(e) {
      console.log(e);
    },

    closeSummit() {
      this.yqtsVisible = false;
      console.log("取消覆盖");
    },

    // 点击确定提交接口
    submitForm() {
      // 默认提交参数数据
      let submitArray = {
        
        plat_username_id: "",
        overall_cost: "",
        iaa_cost: "",
        iap_cost: "",
        game_cost: ""
      };
        //存储原数据
     let newParams= JSON.parse(JSON.stringify(this.paramsForm.params) )
      // 遍历获取form对象。筛选对象中与提交数据不相符的值进行剔除
      let newArr = newParams.map((item, index) => {
        Object.keys(item)
          .filter(key => !(key in submitArray))
          .forEach(key => delete item[key]);
        return item;
      });
      // 筛选不为空的数据
      let bbb = newArr.filter((item, index) => {
        return (
          item.overall_cost || item.iaa_cost || item.iap_cost || item.game_cost
        );
      });

      let options = {
        plat_id: this.platId,
        range_time: `${this.form.date[0]}/${this.form.date[1]}`,
        cost_data: JSON.stringify(bbb)
      };
      console.log(options);

      API.createCompeteData(options).then(
        res => {
          let resData = res.data;
          this.yqtsVisible = false;
          this.visible = false;
          this.$message({
            message: "恭喜你,数据覆盖成功！",
            type: "success"
          });
        },
        err => {
          this.yqtsVisible = false;
          this.visible = false;
          this.$message({
            message: "非常抱歉,数据覆盖失败！",
            type: "error"
          });
          console.log("err", err);
        }
      );
    },

    // 点击保存按钮，先校验是否覆盖再提交
    saveForm() {
        //保存校验
      this.$refs.formRef.validate(valid => {
        if (valid) {
          // 如果校验通过。调用 是否覆盖接口
          if (this.isCheckDataCommit()) {
            this.isDataCover();
          }
        } else {
          this.$message({
            message: "请您修改不符合规则的输入项！",
            type: "error"
          });
        }
      });
    },

    // 校验提交数据符合提交规则

    isCheckDataCommit() {
      let isCheck = true; // 确认是否通过校验。 通过为true，不通过为false

      for (let index in this.paramsForm.params) {
        let item = this.paramsForm.params[index];
        console.log(item);
        let all_cost =
          Number(item.iaa_cost) +
          Number(item.iap_cost) +
          Number(item.game_cost);

        // console.log("3个和===", all_cost);

        // if (
        //   !(
        //       Number(item.overall_cost) ||
        //     Number(item.iaa_cost) ||
        //     Number(item.iap_cost) ||
        //     Number(item.game_cost)
        //   )
        // ) {
        //   this.$message({
        //     message: `[ ${item.plat_username} ]` + "最少要有一个值！",
        //     type: "warning"
        //   });
        //   isCheck = false;
        //   break;
        // }
        // if (
        //   item.overall_cost == "" &&
        //   item.iaa_cost == "" &&
        //   item.iap_cost == "" &&
        //   item.game_cost == ""
        // ) {
        //   this.$message({
        //     message: `[ ${item.plat_username} ]` + "最少要有一个值！",
        //     type: "warning"
        //   });
        //   isCheck = false;
        //   break;
        // }
        if (
          item.overall_cost == "" &&
          !(item.iaa_cost == "" && item.iap_cost == "" && item.game_cost == "")
        ) {
          item.overall_cost = all_cost;
        }

        if (Number(item.overall_cost) < all_cost) {
          this.$message({
            message:
              `[ ${item.plat_username} ]` +
              "aaa+bbb+ccc的值 不可大于总值！",
            type: "warning"
          });
          isCheck = false;
          break;
        }
      }
      return isCheck;
    },
    // 是否覆盖
    isDataCover() {
      let submitArray = {
        plat_username_id: "",
        overall_cost: "",
        iaa_cost: "",
        iap_cost: "",
        game_cost: ""
      };
      //存储原数据
      let newParams= JSON.parse(JSON.stringify(this.paramsForm.params) )
      // 遍历获取form对象。筛选对象中与提价数据不相符的值进行剔除
      let newArr =newParams.map((item, index) => {
        Object.keys(item)
          .filter(key => !(key in submitArray))
          .forEach(key => delete item[key]);
        return item;
      });
      // 筛选不为空的数据
      let bbb = newArr.filter((item, index) => {
        return (
          item.overall_cost || item.iaa_cost || item.iap_cost || item.game_cost
        );
      });

      let options = {
        plat_id: this.platId,
        range_time: `${this.form.date[0]}/${this.form.date[1]}`,
        cost_data: JSON.stringify(bbb)
      };
      console.log(options);

      API.dataCheck(options).then(
        res => {
          let resData = res.data;
          this.is_data = resData.is_data;
          if (resData.is_data == 0) {
            this.submitForm();
          } else {
            this.yqtsVisible = true;
          }
        },
        err => {
          this.$message.error(err.info || "校验是否有覆盖数据失败！");
        }
      );
    },
    // 校验提交的loading
    handleCheck() {
      this.isCheckLoading = this.$loading({
        lock: true,
        text: "数据编辑提交中，请等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }

// 学习参考网站

www.freesion.com/article/747…

blog.csdn.net/weixin_3992…

blog.csdn.net/weixin_4325…

blog.csdn.net/m0_62823653…

blog.csdn.net/weixin_5237…

感谢各位的文章分享！