一、计算
1.HTML
<div class="lomeo-table-content">
<el-table :data="rdata" :span-method="spanMethod" border style="width: 100%">
<el-table-column prop="category" label="类别" width="30">
<template slot-scope="scope">
<div v-html="zongxiang(scope.row.category)"></div>
</template>
</el-table-column>
<el-table-column prop="order" label="序号" width="30"></el-table-column>
<el-table-column prop="evalu" label="项目" width="30">
<template slot-scope="scope">
<div v-html="evaluFormatter(scope)"></div>
</template>
</el-table-column>
<el-table-column prop="tplContent" label="考评内容" width="340"></el-table-column>
<el-table-column prop="quantiNml.name" label="量化标准" width="100"></el-table-column>
<el-table-column prop="evaluNml.name" label="考评标准" width="100"></el-table-column>
<el-table-column prop="response" label="落实情况" width="240">
<template slot-scope="scope">
<div v-html="respFormatter(scope)"></div>
</template>
</el-table-column>
<el-table-column prop="dftDec" label="默认扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,0)"></div>
</template>
</el-table-column>
<el-table-column prop="selfDec" label="自评扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,1)"></div>
</template>
</el-table-column>
<el-table-column prop="dptDec" label="主管部门扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,2)"></div>
</template>
</el-table-column>
<el-table-column prop="leadDec" label="主管领导扣分" width="60">
<template slot-scope="scope">
<div v-html="decFormatter(scope,3)"></div>
</template>
</el-table-column>
<el-table-column prop="tool" label="#" width="60"></el-table-column>
</el-table>
2.对源数据进行计算
/**
* 初始化合并参数表
*/
var cols = [
{
name: 'category', //参与计算的列名，必须和el-table-column prop='category'值一致
getValue(row) { //该列用于比较的值的获取方法
return row.category;
},
},
{
name: 'order',
getValue(row) {
return row.evaluCategory.name;//行序号跟随此列
},
},
{
name: 'evalu',
getValue(row) {
return row.evaluCategory.name;
},
}
];//参与合并的字段，在这里增加即可
var loca = []; //合并座标与数量
for (var i in cols) {
loca.push({
rowSpan: 1,
colSpan: 1,
rowIndex: null,
colProperty: cols[i].name,
order: 0,//行序号
value: null,
getValue: cols[i].getValue,
getOrder() {
return this.colProperty == 'evalu' ? this.order : null;
}
});
}
for (var i = 0; i < pdata.rows.length; i++) {
pdata.rows[i].category = '管理过程';
pdata.rows[i].flag = 'p';
pdata.rows[i].cellSpans = [];
for (var _w in loca) {
var w = loca[_w];
if (i == 0 || w.value != w.getValue(pdata.rows[i])) {//边界指针，1.第一条硬性第一个边界 2.与上一单元格值不同的属于边界
w.rowIndex = i;//行索引，若下一单元格值相同则以此索引叠加rowSpan值
w.rowSpan = 1;//rowSpan默认1
w.value = w.getValue(pdata.rows[i]);//单元格值
w.order += 1;//行号+1
} else {
//若本单元格值==上一单元格值则合并列，rowSpan+=1
for (var p in pdata.rows[w.rowIndex].cellSpans) {
var n = pdata.rows[w.rowIndex].cellSpans[p];
if (n.colProperty == w.colProperty) {
n.rowSpan += 1;
}
}
}
}
//设置行号
for (var q in loca) {
var o = loca[q].getOrder();
if (o) {
pdata.rows[i].order = o;
break;
}
}
pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度复制，否则总是指向最后一条数据
}
二、合并方法
spanMethod({ row, column, rowIndex, columnIndex }) {
//遍历本行合并表
for (var i in row.cellSpans) {
var _r = row.cellSpans[i];
//列属性匹配
if (_r.colProperty == column.property) {
//若合并表指向本单元格则构建合并参数并返回
if (_r.rowIndex == rowIndex) {
return {
rowspan: _r.rowSpan,
colspan: _r.colSpan
}
} else {//否则隐藏该单元格。这里必须有，否则单元格会被右移一列
return {
rowspan: 0,
colspan: 0
};
}
}
}
},
毛坯图：
- 填坑心得
水平太臭调试调了1天多。由于数据抽象，期间序列化输出各种对象，看见了数据思路明晰多了！后来被
pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度复制，否则总是指向最后一条数据
这个赋值搞坑到，无论如何赋值都指向最后一条，Object.assign用上也不行，只能用这句来替代了。
感谢p墩大力帮助！欢迎加群 C#开发.NET后花园 137205402 一起学习！