1 效果:
代码分析:
1 表格头配置:
2 懒得写的:自己复制吧
<el-table:data="tableData"style="width: 98%":height="height"v-loading="isLoading"stripe="false" :span-method="objectSpanMethod"show-summary:summary-method="getSummaries"border>3 合并单元格函数(从整合数据开始)
3-1(数组结构要1维数组,嵌套的需要转换,方法和解释都在,有需要的拿,根据自己字段改改就行)
3-1 代码:
var objarr = []
objarr.forEach(itemparent =>{if(itemparent.areaInfos){itemparent.areaInfos.forEach(itemchildren=>{this.tableData.push({deptName : itemparent.deptName,deptCount : itemparent.deptCount,deptCameraCount : itemparent.deptCameraCount,processingRatio : itemparent.processingRatio,timelinessRatio : itemparent.timelinessRatio,areaName : itemchildren.areaName,alarmCount : itemchildren.alarmCount,dealCount : itemchildren.dealCount,inTimeCount : itemchildren.inTimeCount,cameraCount : itemchildren.cameraCount})})}})this.id_init()3-2 方法
3-2 函数代码:
//合并单元格id_init() {this.id_array = []this.id_pos = 0for(let i = 0 ; i < this.tableData.length; i++) {// 如果当 i == 0 说明数据是第一行, 需要重新赋值if(i == 0) {// this.id_array.push(1) 说明这一行数据被显示出来this.id_array.push(1)// this.id_pos = 0 重置当前的计数器this.id_pos = 0}// 说明不是从第一行开始遍历的else {// 判断当前的指定数据是否和之前的指定数据值相同if(this.tableData[i].deptName == this.tableData[i-1].deptName) {// 如果相同就需要将 this.id_array 的数据自加this.id_array[this.id_pos] += 1// 同时需要将 this.id_array push一个0 表示下一行不用显示this.id_array.push(0)}// 说明 当前的数据和上一行的指定数据不同else {// this.id_array.push(1) 说明当前一行的数据需要显示this.id_array.push(1)// 重新给计数器赋值this.id_pos = i}}}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 用于给某一列的table判断是否合并,下标0则是第一列,需要合并多个列可以写多个条件if(columnIndex === 0 || columnIndex === 5 || columnIndex === 6) {// this.id_array[rowIndex] 取出当前存放行的合并状态const _row = this.id_array[rowIndex] // 判断当前的 列是否需要显示const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}},4:合计 列的显示与计算
合计的函数代码:
getSummaries(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '总价';return;}const values = data.map(item => 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);sums[index];} else {if (index === 5) {sums[index] = Math.round((sums[3] / sums[2]) * 100) + '%';}else if(index === 6){sums[index] = Math.round((sums[4] / sums[2]) * 100) + '%';}else{sums[index] = '';}}});return sums;},5 赠送:(都看到这了,有个事提醒一下data里别忘了加这些参数)
data() {
id_array: [], //合并单元和要用
id_pos: 0, //合并单元和要用
sums:[] //最后[合计]行要用
};