1、先上效果图

2、使用el-table；需要合并的单元格遍历出来

<el-table
  max-height="500"
  class="wl-gantt-table"
  :data="data"
  fit
  border
  size="small"
  :header-cell-style="{ background: '#FAFAFA' }"
>
  <template>
    <!-- <el-table-column
      fixed
      type="index"
      width="50"
      label="序号"
    ></el-table-column> -->
    <el-table-column
      fixed
      align="center"
      label="会议室名称"
      min-width="200"
      class-name="name-col"
      prop="name"
      show-overflow-tooltip
    >
    </el-table-column>
  </template>
  <template>
    <el-table-column
      align="center"
      v-for="(item, i) in minSecond"
      :label="item"
      :key="i"
    >
      <template slot-scope="scope">
        <div :class="dayGanttType(scope.row, item)"></div>
      </template>
    </el-table-column>
  </template>
</el-table>

3、先合并表头

setColSpan () {
	// 获取表头的所有单元格
	var x = document.getElementsByClassName("el-table__header")[0].rows[0]
	  .cells;
	for (let i = 0; i < x.length; i++) {
	  if (i === x.length - 1) {
	    return;
	  }
	  if (i % 2 !== 0) {
	    // 将第二列表头单元格的colSpan设为2
	    x[i].colSpan = 2;
	    // 将第三列表头单元格的display设为none
	    x[i + 1].style.display = "none";
	  }
	}
}

4、改变单元格class颜色

dayGanttType (row, date) {
	// 获取时间数组
	const r = row.time;
	// 遍历多组时间
	for (let i = 0; i < r.length; i++) {
	  // 获取每组时间的开始时间
	  let start_date = r[i].startDate;
	  // 获取每组时间的结束时间
	  let end_date = r[i].endDate;
	  // 查看时间是否在开始和结束时间之间
	  // compareDate方法是获取判断条件的，在这里不重要，就不上代码了。
	  const flag = this.compareDate(start_date, end_date, date);
	  // 如果存在
	  if (flag) {
	    // 判断条件，主要是区分显示颜色，不重要
	    if (r[i].flag === "1") {
	      // 添加class
	      return "wl-item-on";
	    } else {
	      // 添加class
	      return "wl-item-on green";
	    }
	  }
	}
}

5、执行setColSpan方法

this.$nextTick(function () {
	this.setColSpan();
});

6、gantt样式

.wl-gantt .wl-gantt-header>th {
  text-align: center
}

.wl-gantt .h-full {
  height: 100%
}

.wl-gantt .wl-gantt-item>.cell {
  padding: 0
}

.wl-gantt .wl-item-on {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;
  height: 40px;
  background: #F1C782;
  transition: all 0.4s
}

.wl-gantt .green {
  background: #76E2C8;
}

.wl-gantt .wl-item-start {
  width: 50%;
  left: 51%;
}

.wl-gantt .wl-item-end {
  width: 50%;
  right: 51%;
}

/deep/.el-table .cell {
  color: #333333;
}