{{ scope.$index + 1 }}
              
            
            
              
              
                {{ scope.row.name || '--'}}

补充

除了绘制热度表，还可以绘制甘特图哦，下面就是示例代码

            
          
        
      
    
    
    
      
        
          
            
            
          
          
            
            
          
        
        
           确定
        
      
    
  





.hotelApply {
  padding-top: 10px;
  .legend-plan,
  .legend-real {
    display: inline-block;
    width: 40px;
    height: 6px;
    border-radius: 3px;
    background: #00cbed;
  }
  .legend-real {
    background: #fcc300;
  }
  .selected-cell {
    border: 1px solid #00cbed;
  }
  .drawer_box {
    padding: 20px;
  }
}


.el-table >>> th.gutter {
  display: table-cell !important;
}

.el-table >>> colgroup.gutter {
  display: table-cell !important;
}
// 鼠标悬浮去除阴影
.el-table tbody tr:hover > td {
  background-color: #fff !important;
}


$gantt_item: 18px;
$gantt_item_half: 4px;

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

  .h-full {
    height: 100%;
  }

  .wl-gantt-item {
    position: relative;
    transition: all 0.3s;
    > .cell {
      padding: 0;
    }
  }

  .u-full.el-input {
    width: 100%;
  }

  // 计划时间gantt开始
  .wl-item-on {
    position: absolute;
    top: 40%;
    left: 0;
    right: -1px;
    margin-top: -$gantt_item_half;
    height: $gantt_item;
    background: #00cbed;
    transition: all 0.4s;
    cursor: pointer;
  }

  .wl-item-start {
    left: 10%;
    &:after {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }

  .wl-item-end {
    right: 10%;
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }

  .wl-item-full {
    left: 5px;
    right: 5px;
    &:before {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #00cbed;
    }
  }
  // 计划时间gantt结束

  // 实际时间gantt开始
  .wl-real-on {
    position: absolute;
    top: 75%;
    left: 0;
    right: -1px;
    margin-top: -$gantt_item_half;
    height: $gantt_item;
    background: #fcc300; //rgba(250, 167, 146, .6);
    transition: all 0.4s;
  }
  .wl-real-start {
    left: 50%;
    &:after {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }

  .wl-real-end {
    right: 50%;
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }

  .wl-real-full {
    left: 5px;
    right: 5px;
    &:before {
      position: absolute;
      top: 0;
      left: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
    &:after {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 1;
      content: "";
      width: 8px;
      height: 18px;
      border-radius: 50%;
      background: #fcc300;
    }
  }
  // 实际时间gantt结束

  // 名称列
  .name-col {
    position: relative;
    &:hover .name-col-edit {
      display: inline-block;
    }

    .name-col-edit {
      display: none;
      position: absolute;
      right: 0;
    }

    .name-col-icon {
      padding: 6px 3px;
      cursor: pointer;
      font-size: 16px;
    }

    .task-remove {
      color: #f56c6c;
    }
    .task-add {
      color: #409eff;
    }
  }
}
//季度展示、月度展示、周展示
.year-and-quarter,
.year-and-month,
.year-and-week {
  .wl-item-start {
    left: 5%;
  }
  .wl-item-end {
    right: 5%;
  }
  .wl-item-full {
    left: 5%;
    right: 10%;
  }
  .wl-real-full {
    left: 10%;
    right: 5%;
  }
}

效果图