element-ui table表格行合并、标红及数据转换

先看下效果

看下后端返回的数据格式，首先分析下数据结构，maxstatis，minstatis​​​​​​​，avgstatis​​​​​​​，passtatis是上图表格的四行数据，titles是表头，datas是和title对应的kv键值对（除去最后四行数据的所有数据），数据转换的思路：表头-四行独立数据-剩余数据-颜色数据

转后后的数据格式

前端代码

        async fetchData() {
          let data = {
            classCode: self.dialog.item.classCode,
            termId: self.dialog.item.termId,
          };
          let tableData = await self.classCourseStudentGridsReportAct(data);
          // 将表头key进行转换，表头根据字节计算宽度
          self.tableVM.columns = tableData.titles.map((tit) => {
            tit.label = tit.value;
            if (tit.value.byteLength() >= 10) {
              tit.minWidth = tit.value.byteLength() * 7;
            }
            tit.minWidth = "100px";
            tit.checked = true;
            tit.align = "center";
            return tit;
          });
          //列表的首字段为变量marKey，从首字段开始向后合并两个单元格，这里的tableMarkTr是定义的需要合并的
          let markKey = tableData.datas[0][0]["key"];
          Object.keys(tableData).forEach((key) => {
            self.tableMarkTr.forEach((tr) => {
              if (key === tr.key) {
                let obj = {
                  key: markKey,
                  value: tr.value,
                  iscolor: false,
                };
                tableData[`${key}`].push(obj);
              }
            });
          });
          let tableArr = [];
          tableData.datas = [
            ...tableData.datas,
            tableData.maxstatis,
            tableData.minstatis,
            tableData.avgstatis,
            tableData.passtatis,
          ];
          // r = rowIndex（行） c = columIndex（列）
          // 获取颜色坐标
          tableData.datas.forEach((obj, r) => {
            // r=横向坐标
            let dataObj = {};
            dataObj.isColor = [];
            for (const c in obj) {
              // c=纵向坐标
              dataObj[obj[c]["key"]] = obj[c]["value"];
              if (obj[c]["iscolor"] === true) {
                let colorObj = {};
                colorObj[obj[c]["key"]] = obj[c]["value"];
                colorObj.columnIndex = c * 1 + 1;
                colorObj.rowIndex = r;
                dataObj.isColor = dataObj.isColor.concat(colorObj);
              }
            }
            tableArr = tableArr.concat(dataObj);
          });
          let headerInfo = await self.schoolClassDialogTopDetailtAct(data);
          self.tableVM.assignResp(tableArr, headerInfo);
        },

        spanMethod({ row, column, rowIndex, columnIndex }) {
          if (
            rowIndex === self.tableVM.data.length - 1 ||
            rowIndex === self.tableVM.data.length - 2 ||
            rowIndex === self.tableVM.data.length - 3 ||
            rowIndex === self.tableVM.data.length - 4
          ) {
            if (columnIndex === 1) {
              return [1, 3];
            } else if (columnIndex === 0) {
              return [0, 0];
            } else if (columnIndex === 2) {
              return [0, 0];
            }
          }
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
          if (row.isColor && row.isColor.length) {
            for (const item of row.isColor) {
              if (
                item.columnIndex === columnIndex &&
                item.rowIndex === rowIndex
              ) {
                return {
                  color: "red",
                };
              }
            }
          }
        },