vue仿甘特图开发工程施工进度表

前言

	本文是根据项目实际开发中一个需求开发的demo，仅用了elementUI，可当作独立组件使用，C V即用。
当然没考虑其他的扩展性和一些数据的校验，主要是提供一个处理思路，有需要的小伙伴可以直接复制；
	本demo的思路是根据开始时间和结束时间动态生成工程时间表，再根据工程的计划开始和结束日期、
实际开始和结束日期再对应单元格生成进度条，最后根据完成进度百分比计算红色进度条。

一、demo成品图

表格使用的是elementUI，表头是动态的，根据开始日期的年月和结束时间的年月计算获取；
单元格第一行绿色进度条是计划工程进度，第二行绿色是实际功能进度条，红色是实际进度的百分比

二、代码

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称" prop="name" width="200"></el-table-column>
      <el-table-column align="center" v-for="(months, year) in dateList" :key="year"  :label="`${year}年`">
        <el-table-column v-for="month in months" align="center" width="100" :key="month" :label="`${month}月`">
          <template slot-scope="scope">
            <div class="process-box" v-if="scope.row.plan_process[year] && scope.row.plan_process[year].includes(month) || scope.row.actual_process[year] && scope.row.actual_process[year].includes(month)">
              <div class="plan-process" v-if="scope.row.plan_process[year] && scope.row.plan_process[year].includes(month)">
                <div class="item" v-if="scope.row.planSameYearMonth" :style="scope.row.planProcessStyle"></div>
                <div v-else>
                  <div class="item start" v-if="scope.row.plan_start.Y == year && scope.row.plan_start.M == month" :style="scope.row.plan_start.itemStyle"></div>
                  <div class="item end" v-if="scope.row.plan_end.Y == year && scope.row.plan_end.M == month" :style="scope.row.plan_end.itemStyle"></div>
                  <div class="item" v-if="!(scope.row.plan_start.Y == year && scope.row.plan_start.M == month || scope.row.plan_end.Y == year && scope.row.plan_end.M == month)"></div>
                </div>
              </div>
              <div class="actual-process" v-if="scope.row.actual_process[year] && scope.row.actual_process[year].includes(month)">
                <div class="item" v-if="scope.row.actualSameYearMonth" :style="scope.row.actualProcessStyle">
                  <div class="percent_item start" v-if="scope.row.percentSameYearMonth" :style="scope.row.percentProcessStyle"></div>
                </