[vue]vue项目中的elementui的表格中画甘特图

需要在 elementui的table中加入甘特图，在网上找到一个资源，但是直接复制使用后有太多bug，在把bug修改之后达到效果。
参考 https://blog.csdn.net/qq_33599109/article/details/84256685

<template>
  <div class="page2"><el-table :data="tableData" :cell-style="cellStyle" cell-class-name="test" header-cell-class-name="test" :header-cell-style="headerStyle">
      <el-table-column fixed="" label="序号" type="index" align="center" width="40"></el-table-column>
      <el-table-column fixed="" label="计划开始时间" prop="planned_start" align="center" width="110">
        <template slot-scope="scope">
          <span>pw_ scope.row.planned_start </span> </template>
      </el-table-column>
      <el-table-column fixed="" label="计划结束之间" prop="planned_end" align="center" width="100">
        <template slot-scope="scope">
          <span>pw_ scope.row.planned_end </span> </template>
      </el-table-column>
      <!-- <el-table-column label="实际开始时间" prop="start_date" align="center" width="110">
        <template slot-scope="scope">
          <span>pw_ scope.row.start_date </span> </template>
      </el-table-column>
      <el-table-column label="实际结束时间" prop="end_date" align="center" width="110">
        <template slot-scope="scope">
          <span>pw_ scope.row.end_date </span> </template>
      </el-table-column> -->
      <!-- 渲染月份 -->
      <el-table-column v-for="(item, index) in showMonths" :label="item.month" prop="showMonths" align="center" :key="index">
        <el-table-column v-for="(it, index1) in item.daysArr" :label="it.day" width="40" style="padding:0;margin:0;" align="center" :key="index1">
          <template slot-scope="scope1" class="progressCon">
            <div :class="
                scope1.row['s-' + item.str + '-' + it.day]
                  ? test(scope1.row, item.str + '-' + it.day)
                  : ''
              "></div><!--<div :class="
                scope1.row['t-' + item.str + '-' + it.day]
                  ? 'progressDownon'
                  : ''
              "></div>-->
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div></template>



<script>
export default {
  name: "page2",
  data() {
    return {
      showMonths: [],
      tableData: [
        {
          planned_start: "2020-5-4",
          planned_end: "2020-5-15",
          yellowArr: ["2020-5-4", "2020-5-5", "2020-5-7", "2020-5-9"],
        },
        {
          planned_start: "2020-7-4",
          planned_end: "2020-7-22",
        },
        {
          planned_start: "2020-6-15",
          planned_end: "2020-7-11",
        },
      ],
    };
  },
  created() {
    this.getChartTitle("2020-5-4", "2020-7-28");
  },
  methods: {
    test(row, day) {
      if (
        row.yellowArr &&
        row.yellowArr.length &&
        row.yellowArr.indexOf(day) != -1
      ) {
        return "progressDownon";
      } else {
        return "progressUpon";
      }
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return "background:#00306A;font-size:12px;color:#ffffff;height:32px;line-height:32px;";
    },
    cellStyle() {
      return "background:#172243;font-size:12px;color: #EEEEEE;height:32px;line-height:32px;";
    },
    // 渲染表格头，首先是年月，如2018年11月
    getChartTitle(startDate, endDate) {
      var chartTable = this.tableData;
      for (var i = 0; i < chartTable.length; i++) {
        var planStartDate = chartTable.planned_start;
        var planEndDate = chartTable.planned_end;
        var realStartDate = chartTable.start_date;
        var realEndDate = chartTable.end_date;
        var mainObj = chartTable;
        var allPlanArr = this.getAll(planStartDate, planEndDate); // 获取两段时间中的所有日期，添加到数据的表格中
        if (allPlanArr) {
          for (var j = 0; j < allPlanArr.length; j++) {
            var objIndex = "s-" + allPlanArr[j];
            mainObj[objIndex] = true;
          }
        }
        // var allRealArr = this.getAll(realStartDate, realEndDate);
        // if(allRealArr){
        //     for(var j = 0; j < allRealArr.length; j++){
        //         var objIndex = "t-" + allRealArr[j];
        //         mainObj[objIndex] = true;
        //     }
        // }
      }

      // 以下操作把数据放到表格中
      var dateArr = this.getAll(startDate, endDate); // 表格上方的标题和日期
      //获取并拼接我们需要的年月信息。
      var allYearArr = this.getYearArr(dateArr);
      var allMonths = [];
      for (var i = 0; i < allYearArr.length; i++) {
        for (var j = 0; j < allYearArr.days.length; j++) {
          allMonths.push(allYearArr.days[j]);
        }
      }
      this.showMonths = allMonths; // 渲染表格上部的标题
    },

    // 获取时间数组的函数
    getAll(begin, end) {
      // 开始时间和结束时间有不存在的
      if (!begin || !end) {
        return false;
      }
      // 获取两个日期之间的所有日期
      Date.prototype.format = function () {
        var s = "";
        var month = this.getMonth() + 1;
        var day = this.getDate();
        s += this.getFullYear() + "-";
        s += month + "-";
        s += day;
        return s; // 返回可以prop进表格的数据如：'s-2018-11-19'
      };
      var ab = begin.split("-");
      var ae = end.split("-");
      var db = new Date();
      db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
      var de = new Date();
      de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
      var unixDb = db.getTime();
      var unixDe = de.getTime();
      var arr = [];
      for (var k = unixDb; k <= unixDe; ) {
        // 开始的时间戳，结束的时间戳
        arr.push(new Date(parseInt(k)).format());
        k = k + 24 * 60 * 60 * 1000;
      }
      return arr;
    },

    // 获取我们需要的格式的年月日信息
    getYearArr(dateArr) {
      // 获取我们需要格式的年月信息
      var yearArr = [];
      var arr1 = []; // 存年
      for (var i = 0; i < dateArr.length; i++) {
        var fullYear = new Date(dateArr).getFullYear();
        if (arr1.indexOf(fullYear) >= 0) {
          // 有这一年，继续
          continue;
        } else {
          arr1.push(fullYear); // 没有就新增
        }
      }
      for (var i = 0; i < arr1.length; i++) {
        var yearObj = {
          year: "",
          months: [], // 放月的数组
          days: [
            {
              strs: "",
              month: "",
              daysArr: [],
            },
          ],
        };
        yearArr.push(yearObj);
        yearArr.year = arr1; // 赋值年
      }
      for (var i = 0; i < arr1.length; i++) {
        // 遍历拥有的年
        yearArr.months = [];
        for (var j = 0; j < dateArr.length; j++) {
          // 遍历日期        获得这一年，依据这一年获取月份
          var fullYear = new Date(dateArr[j]).getFullYear();
          if (arr1[0] == fullYear) {
            // 当数组中的年和日期的年相等时，获取月份
            var fullMonth = new Date(dateArr[j]).getMonth() + 1;
            if (yearArr.months.indexOf(fullMonth) >= 0) {
              // 这一年的月中有这个月
              continue;
            } else {
              // 没有这个月，添加这个月，并且，获取这个月的天数，并添加
              yearArr.months.push(fullMonth);
            }
          }
        }
      }
      for (var i = 0; i < yearArr.length; i++) {
        // 遍历年
        for (var j = 0; j < yearArr.months.length; j++) {
          // 遍历月，根据年月获取当前月的天数
          var monthsDays = this.getLastDay(
            yearArr.year,
            yearArr.months[j]
          );
          yearArr.days[j] = {};
          yearArr.days[j].str = yearArr.year + "-" + yearArr.months[j]; // 赋值月
          yearArr.days[j].month =
            yearArr.year + "年" + yearArr.months[j] + "月"; // 赋值月
          yearArr.days[j].daysArr = [];
          for (var k = 1; k <= monthsDays; k++) {
            // 赋值天
            var dayObj = {
              day: "",
            };
            yearArr.days[j].daysArr.push(dayObj);
            yearArr.days[j].daysArr[k - 1].day = k + "";
          }
        }
      }
      return yearArr;
    },

    // 获取月的最后一天
    getLastDay(myyear, mymonth) {
      var new_date = new Date(myyear, mymonth, 0);
      return new_date.getDate();
    },
  },
};
</script>

<style>
.test {
  padding: 0 !important;
  text-align: center;
}

.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #0e1529;
}

.el-table--border,
.el-table--group {
  border-color: #0e1529;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 3px solid #0e1529;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 3px solid #0e1529;
}

.el-table--border td,
.el-table--border th {
  border-right: 3px solid #0e1529;
}
.el-table th > .cell,
.el-table th .cell {
  padding: 0 !important;
}

.el-table--enable-row-transition .el-table__body td {
  position: relative;
}
.progressCon {
  padding: 0;
  margin: 0;
  position: relative;
}
.progressUpon {
  background: #008aeb;
  height: 100%;
  width: 100%;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}
.progressDownon {
  background: #e4bb51;
  height: 100%;
  width: 100%;
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>