上效果图：
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue2-Element ui实现 复杂动态报表(同组合并，同组小计，二级表头，内容总合计)</title>
<!-- CDN方式引入element-ui可能会失败，建议浏览器输入下方网址将源码复制出来放到本地 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- <link rel="stylesheet" href="./element.css"> -->
</head>
<body>
<div id="app">
<h2>某平台双十一电脑销量报表</h2>
<div class="tableBox" style="width: 800px;">
<el-table :data="tableData" border :summary-method="getSummaries" :span-method="tablespan" ref="tabRef"
:header-cell-style="{background:'#f5f7fa',color:'#666'}" :cell-style="cellClass" show-summary>
<el-table-column align="center" prop="brandName" label="品牌名称" width="130"></el-table-column>
<el-table-column align="center" prop="saleNumber" label="销售数量" width="110"></el-table-column>
<el-table-column align="center" prop="salePrice" label="销售额" width="110"></el-table-column>
<el-table-column align="center" prop="profit" label="毛利" width="110"></el-table-column>
<el-table-column align="center" label="产品类型">
<el-table-column align="center" prop="Desktop" label="台式机" width="110"></el-table-column>
<el-table-column align="center" prop="laptop" label="笔记本" width="110"></el-table-column>
</el-table-column>
<el-table-column align="center" prop="saleTime" label="统计日期"></el-table-column>
</el-table>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!-- CDN方式引入element-ui可能会失败，建议浏览器输入下方网址将源码复制出来放到本地 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script src="./element.js"></script> -->
<script type="text/javascript">
const app = new Vue({
el: '#app', // 这里的的app 是盒子定义的id名
data() {
return {
// 模拟接口返回的表单数据
// 字段说明： 品牌(brandName)，品牌代码(brandCode)，销售数量(saleNumber)，销售额(salePrice).....
list: [
{id:1,brandName:"联想",brandCode:"01",saleNumber:"8",salePrice:"9995",profit:"2100",Desktop:"5",laptop:"3",saleTime:"2023-11-10"},
{id:2,brandName:"惠普",brandCode:"02",saleNumber:"16",salePrice:"13995",profit:"5150",Desktop:"7",laptop:"9",saleTime:"2023-11-11"},
{id:3,brandName:"机械革命",brandCode:"03",saleNumber:"12",salePrice:"8259",profit:"1850",Desktop:"2",laptop:"10",saleTime:"2023-11-10"},
{id:4,brandName:"联想",brandCode:"01",saleNumber:"23",salePrice:"21295",profit:"3620",Desktop:"8",laptop:"15",saleTime:"2023-11-12"},
{id:5,brandName:"惠普",brandCode:"02",saleNumber:"31",salePrice:"59995",profit:"12100",Desktop:"2",laptop:"29",saleTime:"2023-11-13"},
{id:6,brandName:"联想",brandCode:"01",saleNumber:"11",salePrice:"16585",profit:"3250",Desktop:"2",laptop:"9",saleTime:"2023-11-14"},
{id:7,brandName:"联想",brandCode:"01",saleNumber:"7",salePrice:"16540",profit:"1350",Desktop:"2",laptop:"5",saleTime:"2023-11-12"},
{id:8,brandName:"惠普",brandCode:"02",saleNumber:"8",salePrice:"9995",profit:"2100",Desktop:"5",laptop:"3",saleTime:"2023-11-11"},
{id:9,brandName:"联想",brandCode:"01",saleNumber:"6",salePrice:"10500",profit:"1500",Desktop:"1",laptop:"5",saleTime:"2023-11-15"},
{id:10,brandName:"机械革命",brandCode:"03",saleNumber:"8",salePrice:"10850",profit:"1825",Desktop:"5",laptop:"3",saleTime:"2023-11-11"}
],
tableData: []
};
},
mounted() {
this.GetTabListFun()
},
methods: {
// 这些都是根据调试经验得出的计算，代码可能看起来有点繁杂，不必纠结，只要知道如何使用即可
GetTabListFun() {
this.tableData = this.countClassFun({
Tabchildren: this.$refs.tabRef.$children, // 表格对象的表头列表
DataList: this.list, // 数组对象类型： 接口数据
Countfield: "brandCode", // 字符串类型： 用于归类统计的类别代号字段名,如：根据品牌代码(brandCode)进行归类
countcolumnName: ["销售数量", "销售额", "毛利", "台式机", "笔记本"] // 数组字符串类型：需要统计的列名称（对应列的表头名称）
})
},
// 合并行
tablespan({
row,
column,
rowIndex,
columnIndex
}) {
return this.tablespanFun({
DataList: this.tableData, // 表格数据
RuleField: 'brandCode', // 用于归类统计的类别代号字段名
columnNameList: ['品牌名称'], // 需要合并列的表头名称
row,
column,
rowIndex
})
},
getSummaries(param) { // 总合计
return this.getSummariesFun({
param,
CountList: ["销售数量", "销售额", "毛利", "台式机", "笔记本"] // 需要总合计的对应列
})
},
//设置单元格背景色
cellClass(prop) {
if (this.tableData.length) {
if (prop.row[this.$refs.tabRef.$children[0].prop].includes("合计")) {
return { // 直接在这里改你想要的颜色即可
"background-color": "#fdf3ea",
"color": "red"
}
}
}
},
// 下面是封装好的合并与统计规则，可不必理会，直接复制进去按照上方的用法使用即可================
flattenTree(arr) { // 递归解析多级表头，并将树形表头扁平化为一维对象数组
let newData = []
const expanded = (item) => {
if (item.length) {
item.forEach(e => {
if (e.label && e.prop) {
newData.push(e)
}
expanded(e.$children)
})
}
}
expanded(arr)
return newData
},
countClassFun({
Tabchildren,
DataList,
Countfield,
countcolumnName
}) {
if (!(DataList instanceof Array)) return []
try {
let newList = JSON.parse(JSON.stringify(DataList)) // 深拷贝一份，避免影响源数据
let arr = [] // 将数据按指定字段进行 分组（Countfield）
let idArr = [] // 存放各组id
let tableData = [] // 处理完成后的最终数据
// 自动分配表头的key、value(表头名称、名称对应的列表字段名)
let TabLabel = this.flattenTree(Tabchildren).map((item) => {
return {
label: item.label,
key: item.prop
}
})
newList.forEach((item) => { // 循环查出数据一共有多少组不同的归类id（Countfield）
if (!idArr.includes(item[Countfield])) {
idArr.push(item[Countfield])
}
})
idArr.forEach((id, i) => { // 根据id将数据进行切割分组
let list = []
newList.forEach((item) => {
if (item[Countfield] == id) {
list.push(item)
}
})
// 创建一条合计数据，字段与普通数据相同
let rowData = JSON.parse(JSON.stringify(newList[0]))
Object.keys(rowData).forEach((key, v) => {
rowData[key] = ""
});
TabLabel.forEach((val) => {
if (countcolumnName.includes(val.label)) { // 根据判断当前字段是否需要累加
rowData[val.key] = list.reduce((prev, cur) => { // 累加器
if (!isNaN(cur[val.key])) { // 判断传入的的字段名是否是数字
return prev + Number(cur[val.key]);
}
}, 0);
}
})
rowData[TabLabel[0].key] = "合计："
list.push(rowData) // 处理完毕后，往当前分组尾端插入一条计算好的数据
arr[i] = list
})
arr.forEach((item) => { // 最后将将分组数据扁平化
tableData.push(...item)
})
return tableData
} catch (e) {
return []
}
},
// 报表合并规则
tablespanFun({
DataList,
RuleField,
columnNameList,
row,
column,
rowIndex
}) {
// RuleField：数组类型，接收指定有何列的名称
let newList = JSON.parse(JSON.stringify(DataList))
if (columnNameList.includes(column.label)) {
if (rowIndex > 0 && row[RuleField] == newList[rowIndex - 1][RuleField]) {
return {
rowspan: 0,
colspan: 0
};
} else {
let _row = 1;
for (let i = rowIndex + 1; i < newList.length; i++) {
if (row[RuleField] == newList[i][RuleField]) {
_row++;
} else {
break;
}
}
return {
rowspan: _row,
colspan: 1
};
}
}
},
// 总合计
getSummariesFun({
param,
CountList
}) {
// CountList：*数组类型，接受需要合并的列名称
let {
columns,
data
} = param;
let sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "总合计："
return;
}
if (CountList.includes(column.label)) {
const values = data.map((item) => { // 如果是合计行，则不对这行数值累加
if (!Object.values(item)[1].includes("合计")) {
return Number(item[column.property])
}
});
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
}
}
})
return sums;
},
}
})
</script>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#app {
padding: 30px;
}
h2 {
text-align: center;
}
.tableBox {
margin: 20px auto;
}
/* 组件自带的边框线不太明显,稍微改动一下 */
.el-table .cell {
padding: 0px 5px !important;
}
.el-date-editor .el-range-separator {
min-width: 28px !important;
}
.el-table td.el-table__cell {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border .el-table__cell {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border .el-table__cell {
border-right: 1px solid #d0d0d0 !important;
}
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border .el-table__cell {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border:after,
.el-table--group:after,
.el-table:before {
background-color: #d0d0d0 !important;
}
.el-table--border,
.el-table--group {
border-color: #d0d0d0 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border th,
.el-table--border th.gutter:last-of-type {
border-bottom: 1px solid #d0d0d0 !important;
}
.el-table--border td,
.el-table--border th {
border-right: 1px solid #d0d0d0 !important;
}
.el-table__footer-wrapper td.el-table__cell {
border-top: 1px solid #d0d0d0 !important;
}
</style>
</html>