【el-table 表格合计、表格合并、指定行、列修改背景色 summary-method span-method row-class-name cell-style】

elementUI el-table 表格修改

1.表格合计 每列不同单位
2.表格合并 每列相同参数合并成一格
3.修改某行特定数据背景色
4.修改某列特定数据背景色

        <el-table
          v-if="!loading"
          ref="exportTable"
          :data="tableData"
          v-loading="loading"
          height="450px"
          show-summary
          :summary-method="getSummaries"     // 1
          :span-method="objectSpanMethod"    // 2
          :row-class-name="tableRowClassName"  // 3
          :cell-style="columnStyle"           // 4
          border
         
        >

/ 表格数据统计默认格式修改
    getSummaries({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "平台汇总"; //可更改合计行的名称
          return;
        }
        if (index === 1) {
          sums[index] = "";
          return;
        }
        const values = data.map((item) => {
          return Number(item[column.property]); //property为表头的prop值
        });
        // every() 方法用于检测values数组所有元素是否都符合指定条件（通过函数提供）
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr); //Number转换为数值
            let sum = Number(Number(prev) + Number(curr)).toFixed(2); //toFixed(2)数据项保留两位小数
            if (!isNaN(value)) {
              return parseFloat(sum);
            } else {
              return prev;
            }
          }, 0);
          //给合计项添加单位MW
          if (index === 2) {
            sums[index] += "单";
          } else if (index === 3 || index === 4 || index === 5) {
            sums[index] += "元";
          } else if (index === 6) {
            sums[index] += "度";
          } else if (index === 7) {
            sums[index] += "分";
          }
        } else {
          sums[index] = "";
        }
      });
      return sums; //返回sums数组,sums数组中各项就会显示在合计行的各列中
    },

    // 修改表格列相同参数合并tr
    // spanArr: [], // 合并相同名称平台col数组
    getSpanArr(data) {   // data 列表数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].station_id && data[i].type === data[i - 1].type) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //进行表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    // 表格行背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.category) {
        return "warning-row"; // warning-row class类名
      }
      return "";
    },

    // 表格列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:	#f5f7fa;";
      }
    },