vue + el-calendar 日历考勤对接后台数据

HTML部分

import moment from "moment";

    mounted() {
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          this.getData(this.queryParams.userId);
        })
      })

      this.$nextTick(() => {
        // 点击今天
        let prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)');
        prevBtn.addEventListener('click', () => {
          this.getData(this.queryParams.userId);
        })
      })


      this.$nextTick(() => {
        // 点击后一个月
        let prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:last-child');
        prevBtn.addEventListener('click', () => {
          this.getData(this.queryParams.userId);
        })
      })
    },

JS部分

    methods: {
      //处理时间格式
      handleTime(time){
        let timeArr = time.split("-");
        timeArr[1] = Number(timeArr[1])>9 ? timeArr[1] : "0"+timeArr[1];
        return timeArr.join("-");
      },
      getData(id) {
        this.queryParams.userId = id;
        this.queryParams.month = this.value.getFullYear() + "-" + (this.value.getMonth()+1);
        this.$http
          .post("后台接口", 接口参数)
          .then((res) => {
            if (res.data.code === 200) {
              this.todayTime = res.data.data.month;
              this.tableDataValue = res.data.data.recordList
              this.tableDataValue.forEach(item => {
                this.deptName = item.DEPT_NAME
                this.username = item.USERNAME
                this.indexAdd = [];
                for (let i = 0; i < 31; i++) {
                  // if (item[`RECORDTIME_${i}`] !== null && item[`TEMPERATURE_${i}`] !== null) {
                  this.INDEX = item[`INDEX_${i}`];
                  this.indexAdd.push(this.INDEX)
                  // }
                }
                this.indexReplace = this.indexAdd;
                this.recordsTime = [];
                this.indexReplace.forEach(ele => {
                  this.recordsTime.push({
                    recordTime: item[`RECORDTIME_${ele - 1}`],
                    TempeRature: item[`TEMPERATURE_${ele - 1}`],
                    recordSplice: ((`RECORDTIME_${ele}`).split("_").slice(1)).join(",")
                  })
                })
                // this.recordsTimeArr = this.recordsTime
              })
            } else {
              this.$message.error(res.data.msg);
              this.loadingTable = false;
            }
          })
          .catch((res) => { });
      },

CSS部分