element合并最后一列的所有行

element合并最后一列的所有行

页面

     <el-table
      :data="dataTable"
      :span-method="objectSpanMethod"
      v-loading='loading'
      border
      stripe
      style="width: 100%">
        <el-table-column prop="name" label="区域"> </el-table-column>
        <el-table-column prop="capacity" label="容量(MW)"> </el-table-column>
        <el-table-column prop="speed" label="风速(m/s)"> </el-table-column>
        <el-table-column prop="power" label="功率(kW)"> </el-table-column>
        <el-table-column prop="" label="运行中/容量(MW)">
          <template slot-scope="scope">
            <div>{{ scope.row.runNumber + '/' + scope.row.runCapacity }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="停机中/容量(MW)">
          <template slot-scope="scope">
            <div>{{ scope.row.stopNumber + '/' + scope.row.stopCapacity }}</div>
          </template></el-table-column>
        <el-table-column prop="" label="故障中/容量(MW)">
          <template slot-scope="scope">
            <div>{{ scope.row.runFaultNumber + scope.row.stopFaultNumber + '/' + scope.row.runFaultCapacity + scope.row.stopFaultCapacity }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="energy" label="当年发电量(万kWh)">
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间">
        </el-table-column>
      </el-table>

数据

 data() {
    return {
      timer: '',
      dataTable: [],
      spanArr: [],
      pos: 0,
      loading: false,
    };
  },

数据处理

        //增加最后一行合计/平均
        let lastLine = {
          name: '合计/平均',
          power: 0,
          energy: 0,
          capacity: 0,
          runCapacity: 0,
          runFaultCapacity: 0,
          runFaultNumber: 0,
          runNumber: 0,
          speed: 0,
          stopCapacity: 0,
          stopFaultCapacity: 0,
          stopFaultNumber: 0,
          stopNumber: 0,
          updatedAt: ''
        }
        //合并最后一列所有行
        //解析dataTable格式，新增一列隐藏列，计算更新时间列每次要合并的行数（以本例中所有table的第一行updatedAt均有数据为前提）
        /* 图审分析合并列---计算每次合并行数(此合并列中，有两列合并，pos合并空白行，pos2合并除第一行的所有行) */
        for (var i = 0; i < this.dataTable.length; i++) {
          this.dataTable[i].updatedAt = dateFormat("mm-dd HH:MM", this.dataTable[i].updatedAt)
          
          lastLine.power += this.dataTable[i].power
          lastLine.energy += this.dataTable[i].energy
          lastLine.capacity += this.dataTable[i].capacity
          lastLine.runCapacity += this.dataTable[i].runCapacity
          lastLine.runFaultCapacity += this.dataTable[i].runFaultCapacity
          lastLine.runFaultNumber += this.dataTable[i].runFaultNumber
          lastLine.runNumber += this.dataTable[i].runNumber
          lastLine.stopCapacity += this.dataTable[i].stopCapacity
          lastLine.stopFaultCapacity += this.dataTable[i].stopFaultCapacity
          lastLine.stopFaultNumber += this.dataTable[i].stopFaultNumber
          lastLine.stopNumber += this.dataTable[i].stopNumber
          lastLine.speed += this.dataTable[i].speed


          this.dataTable[i].energy = (this.dataTable[i].energy/10000).toFixed(2)
          if (i === 0) {
            this.spanArr.push(1);//第一行updatedAt均有数据，记录当前合并行数为1.
            this.pos = 0;//spanArr的当前索引是0，已存进一条数据
          } else {
            // 判断当前元素与上一个元素是否相同,或者为空
            if (this.dataTable[i].updatedAt === this.dataTable[i - 1].updatedAt || this.dataTable[i].updatedAt === "") {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
        // 在合并总和/平均单元格
        this.spanArr[this.pos] += 1;
        lastLine.speed = lastLine.speed / this.dataTable.length
        lastLine.energy = (lastLine.energy/10000).toFixed(2)
        lastLine.updatedAt = this.dataTable[0].updatedAt
        this.dataTable.push(lastLine)

方法

    // 合并列 
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 8) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

实现效果