Vue + element table 列动态合并显示Process

需要根据接口数据 开始时间和结束时间 动态加载月份进度条所在位置

完成效果

Z2N~BM2W[)DG4U1]I%SW$)E.png

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;text-align:center"
      :span-method="objectSpanMethod"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="维保名称" width="120">
      </el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="120">
      </el-table-column>
      <el-table-column prop="endtime" label="结束时间" width="120">
      </el-table-column>
      <template v-for="column in monthList">
        <el-table-column
          :key="column.name"
          :label="column.name"
          width="80"
          prop="percent"
        >
          <template slot-scope="scope">
            <p v-if="!scope.row[column.col]"></p>
            <el-progress
              v-else
              :text-inside="true"
              :stroke-width="26"
              :percentage="scope.row.percent"
            ></el-progress>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      monthList: [
        { col: "Jan", name: "一月" },
        { col: "Feb", name: "二月" },
        { col: "Mar", name: "三月" },
        { col: "Apr", name: "四月" },
        { col: "May", name: "五月" },
        { col: "Jun", name: "六月" },
        { col: "Jul", name: "七月" },
        { col: "Aug", name: "八月" },
        { col: "Spt", name: "九月" },
        { col: "Oct", name: "十月" },
        { col: "Nov", name: "十一月" },
        { col: "Dec", name: "十二月" }
      ],

      tableData: [
        {
          starttime: "2020-01-02",
          endtime: "2020-03-05",
          name: "作业1",
          id: 32,
          percent: 50,
          children: [
            {
              id: 37,
              starttime: "2020-03-02",
              endtime: "2020-05-05",
              name: "作业11",
              percent: 20
            },
            {
              id: 38,
              starttime: "2020-05-02",
              endtime: "2020-08-05",
              name: "作业12",
              percent: 30
            }
          ]
        },
        {
          starttime: "2020-08-02",
          endtime: "2020-12-05",
          name: "作业1",
          id: 111,
          percent: 50,
          children: [
            {
              id: 1111,
              starttime: "2020-03-02",
              endtime: "2020-05-05",
              name: "作业11",
              percent: 20
            },
            {
              id: 1231,
              starttime: "2020-05-02",
              endtime: "2020-08-05",
              name: "作业12",
              percent: 30
            }
          ]
        },
        {
          starttime: "2020-03-02",
          endtime: "2020-07-05",
          id: "21",
          name: "作业2",
          percent: 40
        },
        {
          starttime: "2020-09-02",
          endtime: "2020-12-05",
          id: "22",
          name: "作业43",
          percent: 50
        },
        {
          starttime: "2020-04-02",
          endtime: "2020-09-05",
          id: "23",
          name: "作业45",
          percent: 60
        },
        {
          starttime: "2020-02-02",
          endtime: "2020-05-05",
          id: "24",
          name: "作业54",
          percent: 70
        }
      ]
    };
  },
  mounted: function() {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    //处理数据 
    this.handleData(this.tableData);
    console.log(this.tableData)
  },
  methods: {
    //获取月份的英文
    getMonthEN(date){
      var monthEnglish = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"];
      return monthEnglish[new Date(new Date(date)).getMonth()];
    },
    //获取月份数字
    getMonth(date){
      return new Date(new Date(date)).getMonth() + 1
    },
    handleData(data){
        data.forEach(item => {

          //处理几月开始几月结束
          item.startMonthEN = this.getMonthEN(item.starttime)
          item.endMonthEN = this.getMonthEN(item.endtime)
          item.startMonth = this.getMonth(item.starttime)
          item.endMonth = this.getMonth(item.endtime)

          this.monthList.forEach(monthItme => {
            var col = monthItme.col
            if (item.startMonthEN == col) {
              item[col] = true
            }else {
              item[col] = false
            }
            
          }); 
          //递归处理children数据
          if (item.children) {
            this.handleData(item.children)
          }
        });
    },
    //合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2 + +row.startMonth) {
        return [1, +row.endMonth - +row.startMonth + 1];
      }
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>