先看下效果
看下后端返回的数据格式,首先分析下数据结构,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",
};
}
}
}
},