v2 el-table 基础甘特图 + moment.js

 1.示例图

 2.后端返回的格式

要求根据 开始与结束时间 把表格涂上颜色 

 3.代码示例

结合moment.js可以实现该效果

1.时间处理

 <el-table
            :data="tableData"
            border
            :span-method="arraySpanMethod"
            :cell-class-name="renderCellStyle"
            style="width: 100%">
          <el-table-column type="index" label="序号" width="55px" align="center"/>
          <el-table-column show-overflow-tooltip prop="equipmentNumber" label="设备编号" align="center" />
          <el-table-column show-overflow-tooltip prop="equipmentName" label="设备名称" align="center" />
          <el-table-column show-overflow-tooltip prop="userName" label="使用人" align="center" />
          <el-table-column show-overflow-tooltip prop="itemName" label="测试项" align="center" />
          <el-table-column width="45" v-for="item in renderColumn" :label="item.label" align="center">
            <template v-slot="scope">
              {{filterData(scope)}}
            </template>
          </el-table-column>
        </el-table>

data() {
    return {
              tableData: [],
              renderColumn: [],//渲染列表头
    }
}

methods: 

methods: {
        // 渲染月份天数
    remderColumns() {
      this.renderColumn = []
      const year = moment().year(); // 获取当前年份
      const daysInMonth = moment(`${year}-${this.queryParams.month}`, 'YYYY-M').daysInMonth();
      for (let i = 1; i <= daysInMonth; i++) {
        this.renderColumn.push({
          label: `${i}`,
          value: i
        });
      }
    },

        // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 格式化开始结束时间
      const start = moment(row.startTime);
      const end = moment(row.endTime);
      let dayOfMonth = start.date(); //开始时间的 日
      let endDay = end.date(); //结束时间的 日
      if (column.label == dayOfMonth) {
        return {
          colspan: end.diff(start, 'days') + 1, // 合并的行数为开始日期和结束日期之间相差的天数加1
          rowspan: 1,
          label: row.startTime + '-' + row.endTime
        }
      }else if ( !isNaN(column.label)&& column.label > endDay ) {
        return {
          rowspan: 0,
          colspan: 0,
          label: ''
        }
      }else {
        return {
          rowspan: 1,
          colspan: 1,
          label: ''
        }
      }
    },


     filterData(scope) {
      const start = moment(scope.row.startTime);
      let dayOfMonth = start.date(); //开始时间的 日
      if (scope.column.label == dayOfMonth) {
         return scope.row.startTime + '-' + scope.row.endTime
      }
    },

   // 单元格样式
    renderCellStyle(scope) {
      const start = moment(scope.row.startTime);
      let dayOfMonth = start.date(); //开始时间的 日
      if (scope.column.label == dayOfMonth) {
        return 'warning-row'
      }
    },

}