看看效果图
原始渲染页面
转化后的页面
代码
<template>
<div class="m50">
<!-- 转化后 -->
<el-table
border
style="margin-top: 50px"
:data="transData"
:span-method="objectSpanMethod"
:header-cell-style="headFirst"
:cell-style="headFirst_col"
>
<el-table-column
v-for="(item, index) in transTitle"
:label="item"
:key="index"
align="center"
:fixed="index == 0 || index == 1"
>
<template slot-scope="scope">{{ scope.row[index] }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
// 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
originData: [],
// 第一列标题
originTitle: [
"发卡",
"",
"",
"",
// "",
"退卡",
"",
"",
"",
"充值",
"",
"",
"",
"",
"取款",
"",
"补卡",
"",
"",
"损益",
"",
"坏账",
"",
"储蓄消费",
"记次消费",
"营业总收入",
""
],
// 第二列标题
originTitle2: [
// 发卡
"人次",
"收工本费",
"收押金",
"收管理费",
// "退卡",
"人次",
"退存款",
"退押金",
"退管理费",
// 充值
"人次",
"本地存款",
"软件存款",
"充值机存款",
"平台存款",
// "取款",
"人次",
"金额",
// 补卡
"人次",
"收工本费",
"收押金",
// "损益",
"人次",
"金额",
// "坏账",
"人次",
"金额",
// "储蓄消费",
"人次",
// "记次消费",
"人次",
// "营业总收入",
"人次",
"金额",
], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
// transTitle 该标题为转化后的标题, 注意多一列, 因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
transTitle: ["",""],
// 最终渲染数据
transData: [],
};
},
created() {
// 获取数据
this.getList();
// 数组按矩阵思路, 变成转置矩阵
let matrixData = this.originData.map((row) => {
let arr = [];
for (let key in row) {
arr.push(row[key]);
}
return arr;
});
// 加入标题拼接最终的数据
this.transData = matrixData[0].map((col, i) => {
return [
this.originTitle[i],
this.originTitle2[i],
...matrixData.map((row) => {
return row[i];
}),
];
});
},
methods: {
// 请求拿到数据
getList() {
let obj = {
messageCode: 200,
errorMessage: "",
messageContent: [
{
"groupGuid":"6eb5f2c9-d8d1-4357-8a1e-047224a5233b",
"groupName":"老师",
"cardUserCount":0,
"cardBalance":0,
"cardCostBalance":0,
"cardCashBalance":0,
"cardManageBalance":0,
"returnUserCount":0,
"returnRealityBalance":0,
"returnCashBalance":0,
"returnManageBalance":0,
"rechargeUserCount":16,
"localAdjustAmount":0,
"appAdjustAmount":281310,
"machineAdjustAmount":0,
"platformAdjustAmount":0,
"drawUserCount":0,
"drawExpenditure":0,
"replacementUserCount":0,
"replacementCostBalance":0,
"replacementCashBalance":0,
"profitLossUserCount":0,
"profitLossBalance":0,
"badDebUserCount":0,
"badDebCashBalance":0,
"successExpenditureCount":0,
"timesExpenditureCount":0,
"expenditureCount":0,
"expenditureBalance":0
}
],
};
// 初始化
this.originData = [];
this.transTitle = ["", ""];
// 删除多余的字段，不显示在表格里的字段
obj.messageContent.forEach((item, index) => {
console.log(item, index);
delete obj.messageContent[index].groupGuid;
delete obj.messageContent[index].cardBalance;
this.transTitle.push(item.groupName);
delete obj.messageContent[index].groupName;
item.appAdjustAmount = this.amountyua(item.appAdjustAmount)
this.originData.push(item);
});
console.log(this.originData);
},
// 列合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1,
};
} else if (rowIndex === 4) {
return {
rowspan: 4,
colspan: 1,
};
} else if (rowIndex === 8) {
return {
rowspan: 5,
colspan: 1,
};
} else if (rowIndex === 13) {
return {
rowspan: 2,
colspan: 1,
};
} else if (rowIndex === 15) {
return {
rowspan: 3,
colspan: 1,
};
}else if (rowIndex === 18) {
return {
rowspan: 2,
colspan: 1,
};
}else if (rowIndex === 20) {
return {
rowspan: 2,
colspan: 1,
};
}else if (rowIndex === 22) {
return {
rowspan: 1,
colspan: 1,
};
}else if (rowIndex === 23) {
return {
rowspan: 1,
colspan: 1,
};
}else if (rowIndex === 24) {
return {
rowspan: 2,
colspan: 1,
};
}else {
return {
rowspan: 0,
colspan: 0,
};
}
} else {
return {
rowspan: 1,
colspan: 1,
};
}
},
// 表头样式
headFirst({ row, colunm, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return { background: "#45c2b5", color: "#fff" };
} else {
return "";
}
},
// 列样式
headFirst_col({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
// 指定列号
return { fontWeight: 900, fontSize: "14px" };
} else {
return "";
}
},
},
};
</script>
<style lang="scss" scoped>
.m50 {
margin: 50px;
}
</style>
